<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import FormScriptEngine from '~/components/FormScriptEngine.vue';
import ConditionalLogicEngine from '~/components/ConditionalLogicEngine.vue';
import ComponentPreview from '~/components/ComponentPreview.vue';
import { useFormBuilderStore } from '~/stores/formBuilder';
import { FormKit } from '@formkit/vue';

// Define page meta
definePageMeta({
  title: "Process Execution",
  description: "Execute and run through a business process workflow",
  layout: "empty",
  middleware: ["auth"],
  requiresAuth: true,
});

// Get route and router
const route = useRoute();
const router = useRouter();

// Get form builder store for ComponentPreview data sharing
const formStore = useFormBuilderStore();

// State
const loading = ref(true);
const process = ref(null);
const currentStep = ref(0);
const caseInstance = ref(null);
const formData = ref({});
const processVariables = ref({});
const error = ref(null);
const stepLoading = ref(false);
const currentForm = ref(null);
const tasks = ref([]);
const conditionalLogicScript = ref('');
const combinedScript = ref('');

// Get process ID from route
const processId = computed(() => route.params.id);

// Get current workflow definition
const workflowData = computed(() => {
  if (!process.value?.processDefinition) return null;
  return process.value.processDefinition;
});

// Get current step node
const currentNode = computed(() => {
  if (!workflowData.value?.nodes || currentStep.value >= workflowData.value.nodes.length) {
    return null;
  }
  return workflowData.value.nodes[currentStep.value];
});

// Get next step
const nextNode = computed(() => {
  if (!workflowData.value?.nodes || currentStep.value + 1 >= workflowData.value.nodes.length) {
    return null;
  }
  return workflowData.value.nodes[currentStep.value + 1];
});

// Check if process is complete
const isProcessComplete = computed(() => {
  return currentNode.value?.type === 'end' || currentStep.value >= (workflowData.value?.nodes?.length || 0);
});

// Load process data
const loadProcess = async () => {
  try {
    loading.value = true;
    error.value = null;
    
    console.log('[Workflow] Loading process definition...');
    const response = await $fetch(`/api/process/${processId.value}`);
    
    if (response.success) {
      process.value = response.process; // includes processDefinition
      console.log('[Workflow] Process loaded:', process.value.processName, process.value.processDefinition);
      
      // Check if process is published
      const status = process.value.processStatus || process.value.status || 'draft';
      if (status !== 'published') {
        error.value = 'Process must be published before execution';
        return;
      }
      
      // Initialize process variables from DB (process.processVariables)
      processVariables.value = process.value.processVariables ? { ...process.value.processVariables } : {};
      
      // Start the process execution (case instance)
      await startProcessExecution();
      
    } else {
      error.value = response.message || 'Failed to load process';
    }
  } catch (err) {
    console.error('[Workflow] Error loading process:', err);
    error.value = 'Failed to load process data';
  } finally {
    loading.value = false;
  }
};

// Start process execution (create case instance)
const startProcessExecution = async () => {
  try {
    console.log('[Workflow] Starting process execution (creating case instance)...');
    const response = await $fetch(`/api/process/${processId.value}/start`, {
      method: 'POST'
    });
    
    if (response.success) {
      caseInstance.value = response.data.case;
      tasks.value = response.data.tasks;
      console.log('[Workflow] Case instance created:', caseInstance.value);
      // Find the start node
      const startNodeIndex = workflowData.value.nodes.findIndex(node => node.type === 'start');
      currentStep.value = startNodeIndex >= 0 ? startNodeIndex : 0;
      console.log('[Workflow] Starting at node index:', currentStep.value, workflowData.value.nodes[currentStep.value]);
      moveToNextStep();
    } else {
      throw new Error(response.error || 'Failed to start process');
    }
  } catch (err) {
    console.error('[Workflow] Error starting process execution:', err);
    error.value = 'Failed to start process execution';
  }
};

// Helper: Get next node ID by following edges
function getNextNodeId(currentNodeId) {
  const edge = workflowData.value.edges.find(e => e.source === currentNodeId);
  return edge ? edge.target : null;
}

// Move to next step in workflow (edge-based)
const moveToNextStep = () => {
  const currentNode = workflowData.value.nodes[currentStep.value];
  if (!currentNode) return;
  const nextNodeId = getNextNodeId(currentNode.id);
  if (nextNodeId) {
    const nextIndex = workflowData.value.nodes.findIndex(n => n.id === nextNodeId);
    if (nextIndex !== -1) {
      currentStep.value = nextIndex;
      const node = workflowData.value.nodes[currentStep.value];
      console.log(`[Workflow] Entered node: ${node.type} - ${node.data?.label || node.label}`);
    }
  }
};

// Handle form submission
const handleFormSubmit = async () => {
  try {
    stepLoading.value = true;
    
    console.log('[Workflow] Form submitted. Data:', formData.value);
    // Save form data to process variables
    Object.assign(processVariables.value, formData.value);
    
    // Move to next step
    moveToNextStep();

    console.log('[Workflow] After form submit, current node:', currentNode.value);
    
    // If next step is API or script, execute it automatically
    if (currentNode.value && ['api', 'script'].includes(currentNode.value.type)) {
      await executeCurrentStep();
    }
  } catch (err) {
    console.error('[Workflow] Error submitting form:', err);
    error.value = 'Failed to submit form';
  } finally {
    stepLoading.value = false;
  }
};

// Execute current step (for API/script nodes)
const executeCurrentStep = async () => {
  try {
    stepLoading.value = true;

    console.log('[Workflow] Executing current step:', currentNode.value);
    
    if (currentNode.value?.type === 'api') {
      console.log(`[Workflow] Executing API node: ${currentNode.value.data?.label || currentNode.value.label}`);
      // Enhanced API node execution
      const {
        apiUrl,
        apiMethod = 'GET',
        headers = '{}',
        requestBody = '',
        outputVariable = 'apiResponse',
        errorVariable = 'apiError',
        continueOnError = false
      } = currentNode.value.data || {};
      try {
        const response = await $fetch(apiUrl, {
          method: apiMethod,
          headers: headers ? JSON.parse(headers) : {},
          body: requestBody ? JSON.parse(requestBody) : undefined,
        });
        processVariables.value[outputVariable] = response;
        processVariables.value[errorVariable] = null;
        console.log('[Workflow] API call success. Output variable set:', outputVariable, response);
        moveToNextStep();
      } catch (err) {
        processVariables.value[errorVariable] = err;
        console.error('[Workflow] API call failed:', err);
        if (continueOnError) {
          moveToNextStep();
        } else {
          error.value = 'API call failed: ' + (err.message || err);
        }
      }
    } else if (currentNode.value?.type === 'script') {
      console.log(`[Workflow] Executing script node: ${currentNode.value.data?.label || currentNode.value.label}`);
      // Simulate script execution
      await new Promise(resolve => setTimeout(resolve, 500));
      moveToNextStep();
    }
    // Add more node types as needed
  } catch (err) {
    console.error('[Workflow] Error executing step:', err);
    error.value = 'Failed to execute step';
  } finally {
    stepLoading.value = false;
  }
};

// Get step type display info
const getStepInfo = (node) => {
  const stepTypes = {
    'start': { label: 'Process Started', icon: 'material-symbols:play-circle', color: 'green' },
    'form': { label: 'User Form', icon: 'material-symbols:description', color: 'blue' },
    'api': { label: 'API Call', icon: 'material-symbols:api', color: 'purple' },
    'script': { label: 'Script Execution', icon: 'material-symbols:code', color: 'orange' },
    'decision': { label: 'Decision Point', icon: 'material-symbols:alt-route', color: 'yellow' },
    'end': { label: 'Process Complete', icon: 'material-symbols:check-circle', color: 'green' }
  };
  
  return stepTypes[node?.type] || { label: 'Unknown Step', icon: 'material-symbols:help', color: 'gray' };
};

// Load form data from database
const loadFormData = async (formId) => {
  try {
    if (!formId) return null;
    
    const response = await $fetch(`/api/forms/${formId}`);
    if (response.success) {
      return response.form;
    }
    return null;
  } catch (error) {
    console.error('Error loading form:', error);
    return null;
  }
};

// Note: isInputType function removed as ComponentPreview handles all component types

// Get truncated custom script for display
const customScriptPreview = computed(() => {
  if (!currentForm.value?.customScript) return '';
  return currentForm.value.customScript.substring(0, 200) + '...';
});

// Handle script-driven field changes
const handleScriptFieldChange = ({ fieldName, value }) => {
  console.log('[WorkflowExecution] Script field change:', fieldName, '=', value);
  // Update form data with script changes
  formData.value[fieldName] = value;
  // Also update form store for ComponentPreview
  formStore.updatePreviewFormData(formData.value);
};

// Handle conditional logic script generation
const handleConditionalLogicGenerated = (generatedScript) => {
  console.log('[WorkflowExecution] Conditional logic script generated');
  conditionalLogicScript.value = generatedScript;
  
  // Combine conditional logic with custom script
  const customScript = currentForm.value?.customScript || '';
  combinedScript.value = [conditionalLogicScript.value, customScript].filter(Boolean).join('\n\n');
};

// Navigation functions
const goHome = () => {
  router.push('/');
};

// Load process on mount
onMounted(() => {
  loadProcess();
});

// Watch for step changes to auto-execute non-form steps or load form data
watch(currentStep, async (newStep) => {
  if (currentNode.value) {
    if (['api', 'script'].includes(currentNode.value.type)) {
      await executeCurrentStep();
    } else if (currentNode.value.type === 'form') {
      // Load form data for form nodes
      const formId = currentNode.value.data?.formId;
      if (formId) {
        currentForm.value = await loadFormData(formId);
        // Update form store with form components and data for ComponentPreview
        if (currentForm.value?.formComponents) {
          formStore.formComponents = currentForm.value.formComponents;
          formStore.updatePreviewFormData(formData.value);
        }
      }
    }
  }
});

// Watch formData changes and sync with form store
watch(formData, (newData) => {
  formStore.updatePreviewFormData(newData);
}, { deep: true });

// Add FormKit form ref
const formRef = ref(null);

// New: handle FormKit form submit
const onFormKitSubmit = () => {
  handleFormSubmit();
};

// New: validate and submit handler for button
const validateAndSubmit = () => {
  if (formRef.value && formRef.value.node && typeof formRef.value.node.submit === 'function') {
    formRef.value.node.submit();
  }
};

// Compute the workflow path by following edges from start to end
function computeWorkflowPath() {
  const path = [];
  const nodes = workflowData.value?.nodes || [];
  const edges = workflowData.value?.edges || [];
  if (!nodes.length) return path;
  let node = nodes.find(n => n.type === 'start');
  while (node) {
    path.push(node.id);
    const outgoingEdges = edges.filter(e => e.source === node.id);
    if (outgoingEdges.length > 1) {
      console.warn('[Workflow] Multiple outgoing edges found for node', node.id, outgoingEdges);
      // For progress, just follow the first edge for now
    }
    const edge = outgoingEdges[0];
    node = edge ? nodes.find(n => n.id === edge.target) : null;
  }
  return path;
}

const workflowPath = ref([]);

watch(
  () => workflowData.value,
  () => {
    workflowPath.value = computeWorkflowPath();
  },
  { immediate: true }
);

const currentStepIndex = computed(() => {
  return workflowPath.value.indexOf(currentNode.value?.id) + 1;
});
const totalSteps = computed(() => workflowPath.value.length);
</script>

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <header class="bg-white border-b border-gray-200 px-6 py-4 shadow-sm">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <Icon
            @click="goHome"
            name="ph:arrow-circle-left-duotone"
            class="cursor-pointer w-6 h-6 hover:text-gray-600 text-gray-500"
          />
          <div class="flex items-center gap-3">
            <img
              src="@/assets/img/logo/logo-word-black.svg"
              alt="Corrad Logo"
              class="h-8"
            />
            <div class="border-l border-gray-300 pl-3">
              <h1 class="text-xl font-semibold text-gray-900">Process Execution</h1>
              <p class="text-sm text-gray-500">
                {{ process?.processName || 'Loading...' }}
              </p>
            </div>
          </div>
        </div>

        <!-- Progress indicator -->
        <div v-if="!loading && !error" class="flex items-center gap-2 text-sm text-gray-600">
          <span>Step {{ currentStepIndex }} of {{ totalSteps }}</span>
          <div class="w-32 bg-gray-200 rounded-full h-2">
            <div 
              class="bg-blue-600 h-2 rounded-full transition-all duration-300"
              :style="{ width: `${((currentStepIndex) / (totalSteps || 1)) * 100}%` }"
            ></div>
          </div>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <div class="container mx-auto px-6 py-8 max-w-4xl">
      <!-- Loading State -->
      <div v-if="loading" class="flex justify-center items-center py-12">
        <div class="text-center">
          <Icon name="material-symbols:progress-activity" class="w-8 h-8 animate-spin text-blue-500 mx-auto mb-2" />
          <p class="text-gray-500">Loading process...</p>
        </div>
      </div>

      <!-- Error State -->
      <div v-else-if="error" class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center">
        <Icon name="material-symbols:error-outline" class="w-16 h-16 text-red-400 mx-auto mb-4" />
        <h3 class="text-lg font-medium text-gray-900 mb-2">Error</h3>
        <p class="text-gray-600 mb-6">{{ error }}</p>
        <RsButton @click="goHome" variant="primary">
          <Icon name="material-symbols:home" class="mr-2" />
          Go Home
        </RsButton>
      </div>

      <!-- Process Complete -->
      <div v-else-if="isProcessComplete" class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center">
        <Icon name="material-symbols:check-circle" class="w-16 h-16 text-green-500 mx-auto mb-4" />
        <h2 class="text-2xl font-bold text-gray-900 mb-2">Process Complete!</h2>
        <p class="text-gray-600 mb-6">
          The workflow "{{ process.processName }}" has been completed successfully.
        </p>
        <div class="flex justify-center gap-3">
          <RsButton @click="loadProcess" variant="secondary">
            <Icon name="material-symbols:refresh" class="mr-2" />
            Run Again
          </RsButton>
          <RsButton @click="goHome" variant="primary">
            <Icon name="material-symbols:home" class="mr-2" />
            Go Home
          </RsButton>
        </div>
      </div>

      <!-- Current Step -->
      <div v-else-if="currentNode" class="space-y-6">
        <!-- Step Info -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <div class="flex items-center gap-4 mb-4">
            <div :class="[
              'p-3 rounded-lg',
              getStepInfo(currentNode).color === 'blue' ? 'bg-blue-100 text-blue-600' :
              getStepInfo(currentNode).color === 'green' ? 'bg-green-100 text-green-600' :
              getStepInfo(currentNode).color === 'purple' ? 'bg-purple-100 text-purple-600' :
              getStepInfo(currentNode).color === 'orange' ? 'bg-orange-100 text-orange-600' :
              'bg-gray-100 text-gray-600'
            ]">
              <Icon :name="getStepInfo(currentNode).icon" class="w-6 h-6" />
            </div>
            <div>
              <h2 class="text-xl font-semibold text-gray-900">{{ getStepInfo(currentNode).label }}</h2>
              <p class="text-gray-600">{{ currentNode.data?.label || currentNode.data?.name || `Step ${currentStepIndex}` }}</p>
            </div>
          </div>
        </div>

        <!-- Form Step -->
        <div v-if="currentNode.type === 'form'" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
          <div class="mb-4">
            <h3 class="text-lg font-semibold text-gray-900 mb-2">
              {{ currentNode.data?.formName || currentNode.data?.label || 'Please fill out the form' }}
            </h3>
            <p v-if="currentForm?.formDescription" class="text-gray-600 text-sm">
              {{ currentForm.formDescription }}
            </p>
          </div>
          
          <!-- Loading form data -->
          <div v-if="!currentForm && currentNode.data?.formId" class="flex justify-center py-8">
            <div class="text-center">
              <Icon name="material-symbols:progress-activity" class="w-6 h-6 animate-spin text-blue-500 mx-auto mb-2" />
              <p class="text-gray-500">Loading form...</p>
            </div>
          </div>
          
          <!-- Form rendering -->
          <div v-else-if="currentForm && currentForm.formComponents" class="form-container">
            <!-- Conditional Logic Engine for FormKit conditional logic -->
            <ConditionalLogicEngine
              :form-components="currentForm.formComponents"
              :form-data="formData"
              @script-generated="handleConditionalLogicGenerated"
            />
            
            <!-- Form Script Engine for conditional logic + custom script -->
            <FormScriptEngine
              v-if="combinedScript"
              :form-data="formData"
              :custom-script="combinedScript"
              :custom-css="currentForm.customCSS"
              :form-events="currentForm.formEvents || { onLoad: true, onFieldChange: true }"
              :script-mode="currentForm.scriptMode || 'safe'"
              @field-change="handleScriptFieldChange"
            />
            
            <!-- FormKit form wrapper -->
            <FormKit
              type="form"
              v-model="formData"
              ref="formRef"
              @submit="onFormKitSubmit"
              :actions="false"
              :incomplete-message="false"
              validation-visibility="submit"
            >
              <div class="space-y-6">
                <template v-for="(component, index) in currentForm.formComponents" :key="index">
                  <ComponentPreview 
                    :component="component" 
                    :is-preview="false" 
                  />
                </template>
                <div class="flex justify-end pt-6 border-t border-gray-200">
                  <RsButton 
                    @click="validateAndSubmit"
                    :disabled="stepLoading"
                    variant="primary"
                  >
                    <Icon v-if="stepLoading" name="material-symbols:progress-activity" class="w-4 h-4 animate-spin mr-2" />
                    {{ stepLoading ? 'Processing...' : 'Submit & Continue' }}
                  </RsButton>
                </div>
              </div>
            </FormKit>
            
            <!-- Script Info (for debugging) -->
            <div v-if="combinedScript" class="mt-4 p-3 bg-gray-50 rounded-lg border">
              <details>
                <summary class="text-sm font-medium text-gray-700 cursor-pointer">Form Logic Available (Development)</summary>
                <div class="mt-2 space-y-2">
                  <div v-if="conditionalLogicScript">
                    <p class="text-xs font-medium text-gray-600">Conditional Logic:</p>
                    <pre class="text-xs text-gray-600 bg-white p-2 rounded border overflow-auto max-h-32">{{ conditionalLogicScript.substring(0, 200) }}...</pre>
                  </div>
                  <div v-if="currentForm?.customScript">
                    <p class="text-xs font-medium text-gray-600">Custom Script:</p>
                    <pre class="text-xs text-gray-600 bg-white p-2 rounded border overflow-auto max-h-32">{{ customScriptPreview }}</pre>
                  </div>
                </div>
              </details>
            </div>
          </div>
          
          <!-- Fallback if no form data -->
          <div v-else class="text-center py-8">
            <Icon name="material-symbols:description-outline" class="w-12 h-12 text-gray-300 mx-auto mb-4" />
            <h4 class="text-lg font-medium text-gray-900 mb-2">Form Not Found</h4>
            <p class="text-gray-600 mb-4">The form associated with this step could not be loaded.</p>
            <RsButton @click="moveToNextStep" variant="primary">
              <Icon name="material-symbols:skip-next" class="mr-2" />
              Skip to Next Step
            </RsButton>
          </div>
        </div>

        <!-- API/Script Step -->
        <div v-else-if="['api', 'script'].includes(currentNode.type)" class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
          <Icon name="material-symbols:progress-activity" class="w-8 h-8 animate-spin text-blue-500 mx-auto mb-4" />
          <h3 class="text-lg font-semibold text-gray-900 mb-2">
            {{ currentNode.type === 'api' ? 'Calling API...' : 'Executing Script...' }}
          </h3>
          <p class="text-gray-600">Please wait while we process this step</p>
        </div>

        <!-- Other Step Types -->
        <div v-else class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
          <Icon name="material-symbols:info" class="w-8 h-8 text-blue-500 mx-auto mb-4" />
          <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ getStepInfo(currentNode).label }}</h3>
          <p class="text-gray-600 mb-6">This step type is not yet implemented</p>
          <RsButton @click="moveToNextStep" variant="primary">
            <Icon name="material-symbols:skip-next" class="mr-2" />
            Skip to Next Step
          </RsButton>
        </div>

        <!-- Process Variables Debug (only in development) -->
        <div v-if="Object.keys(processVariables).length > 0" class="bg-gray-100 rounded-lg p-4">
          <details>
            <summary class="font-medium text-gray-700 cursor-pointer mb-2">Process Variables (Debug)</summary>
            <pre class="text-xs text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(processVariables, null, 2) }}</pre>
          </details>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
</style>