<template>
    <div class="container mx-auto px-4 py-6">
      <p class="text-lg font-bold mb-4">{{ caseInstance.caseName }}</p>
  
      <div v-if="loading" class="text-blue-500">Loading...</div>
      <div v-if="error" class="text-red-500">{{ error }}</div>
  
      <div v-if="forms.length > 0">
        <!-- Tab Navigation -->
        <div class="border-b border-gray-200 mb-6">
          <nav class="flex -mb-px">
            <button 
              v-for="(form, index) in forms" 
              :key="index"
              @click="activeTabIndex = index"
              class="py-4 px-6 font-medium text-sm border-b-2 whitespace-nowrap"
              :class="[
                activeTabIndex === index 
                  ? 'border-primary text-primary' 
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              ]"
            >
              <div class="flex items-center">
                <div class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center mr-2" 
                  :class="{ 'bg-primary text-white': activeTabIndex === index }">
                  {{ index + 1 }}
                </div>
                <div class="flex items-center">
                  {{ form.formName || `Form ${index + 1}` }}
                  <!-- Access indicator -->
                  <div v-if="!form.hasEditAccess" class="ml-2">
                    <div class="w-4 h-4 rounded-full bg-yellow-100 flex items-center justify-center" 
                         title="Read-only access">
                      <svg class="w-3 h-3 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </button>
          </nav>
        </div>
  
        <!-- Tab Content -->
        <div class="bg-white rounded-lg shadow p-6">
          <div v-for="(form, index) in forms" :key="`content-${index}`" v-show="activeTabIndex === index">
            <!-- Form Header with Access Status -->
            <div class="mb-6">
              <div class="flex items-center justify-between mb-2">
                <h2 class="text-xl font-semibold">{{ form.formName || `Form ${index + 1}` }}</h2>
                <!-- Access Status Badge -->
                <div v-if="!form.hasEditAccess" class="flex items-center">
                  <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 border border-yellow-200">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                    Read-only Access
                  </div>
                </div>
                <div v-else class="flex items-center">
                  <div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 border border-green-200">
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                    Edit Access
                  </div>
                </div>
              </div>
              
              <p class="text-gray-600 mb-1">{{ form.description || 'Please complete this form step' }}</p>
              
              <!-- Access Information -->
              <div v-if="!form.hasEditAccess" class="mt-3 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
                <div class="flex items-start">
                  <svg class="w-5 h-5 text-yellow-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                  </svg>
                  <div>
                    <p class="text-sm font-medium text-yellow-800">Read-only Access</p>
                    <p class="text-sm text-yellow-700 mt-1">
                      You can view this form but cannot make changes. 
                      <span v-if="form.accessReason === 'user_not_assigned'">This form is assigned to specific users.</span>
                      <span v-else-if="form.accessReason === 'role_not_assigned'">This form is assigned to specific roles.</span>
                      <span v-else>You don't have permission to edit this form.</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- Conditional Logic Engine -->
            <ConditionalLogicEngine
              :form-components="form.formComponents"
              :form-data="formData[index]"
              @script-generated="handleScriptGenerated"
            />
            
            <!-- Form content -->
            <FormKit 
              type="form" 
              :id="`form-${form.formID}`"
              v-model="formData[index]"
              @submit="handleSubmit(index)"
              :actions="false"
              :incomplete-message="false"
              validation-visibility="submit"
              :disabled="!form.hasEditAccess"
            >
              <div class="grid-preview-container">
                <template v-if="form.formComponents && form.formComponents.length > 0">
                  <div 
                    v-for="(component, compIndex) in form.formComponents" 
                    :key="`component-${compIndex}`"
                    :style="{
                      gridColumn: component.props?.gridColumn || 'span 12'
                    }"
                  >
                    <!-- Standard FormKit inputs -->
                    <FormKit
                      v-if="isStandardInput(component.type)"
                      :type="component.type"
                      :name="component.props?.name"
                      :label="component.props?.label"
                      :help="component.props?.help"
                      :placeholder="component.props?.placeholder"
                      :validation="component.props?.validation"
                      :options="component.props?.options"
                      :value="component.props?.value"
                      :class="component.props?.width ? `w-${component.props.width}` : 'w-full'"
                      class="mb-4"
                      :disabled="!form.hasEditAccess"
                      :readonly="!form.hasEditAccess"
                    />

                    <!-- Heading -->
                    <div v-else-if="component.type === 'heading'" class="py-2 mb-4">
                      <component 
                        :is="`h${component.props?.level || 2}`" 
                        class="font-semibold"
                        :class="{
                          'text-2xl': component.props?.level === 2,
                          'text-xl': component.props?.level === 3,
                          'text-lg': component.props?.level === 4
                        }"
                      >
                        {{ component.props?.value || 'Heading Text' }}
                      </component>
                    </div>

                    <!-- Paragraph -->
                    <div v-else-if="component.type === 'paragraph'" class="py-2 mb-4">
                      <p class="text-gray-600">{{ component.props?.value || 'Paragraph text goes here' }}</p>
                    </div>

                    <!-- Divider -->
                    <div v-else-if="component.type === 'divider'" class="py-2 mb-4">
                      <hr class="border-t border-gray-200">
                    </div>

                    <!-- Info Display -->
                    <div v-else-if="component.type === 'info-display'" class="mb-4">
                      <div 
                        class="p-4 rounded-lg"
                        :class="{ 'border': component.props?.showBorder }"
                        :style="{ backgroundColor: component.props?.backgroundColor || '#f8fafc' }"
                      >
                        <h3 class="font-medium mb-2">{{ component.props?.title || 'Information' }}</h3>
                        <div 
                          :class="{
                            'grid grid-cols-2 gap-4': component.props?.layout === 'grid',
                            'flex flex-col space-y-2': component.props?.layout === 'vertical' || !component.props?.layout,
                            'flex flex-row flex-wrap gap-4': component.props?.layout === 'horizontal'
                          }"
                        >
                          <div 
                            v-for="(field, fieldIndex) in component.props?.fields" 
                            :key="`field-${fieldIndex}`"
                            class="text-sm"
                          >
                            <span class="text-gray-600">{{ field.label }}:</span>
                            <span class="ml-2 font-medium">{{ field.value }}</span>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- Button -->
                    <div v-else-if="component.type === 'button'" class="py-2 mb-4">
                      <RsButton 
                        :type="component.props?.buttonType || 'button'" 
                        :variant="component.props?.variant || 'primary'"
                        :size="component.props?.size || 'md'"
                        :disabled="component.props?.disabled || !form.hasEditAccess"
                      >
                        {{ component.props?.label || 'Button' }}
                      </RsButton>
                    </div>
                  </div>
                </template>
                <div v-else class="text-center py-8 text-gray-500">
                  No form components found.
                </div>
              </div>
              
              <!-- Submit button if not already included in the form -->
              <!-- <FormKit 
                v-if="!hasSubmitButton(form)"
                type="submit" 
                label="Submit" 
                :disabled="submitting || !form.hasEditAccess"
                :classes="{
                  input: submitting ? 'opacity-75 cursor-wait' : ''
                }"
                class="mt-6" 
              /> -->
              <div v-if="submitting" class="text-center mt-2 text-sm text-blue-500">
                Submitting form...
              </div>
            </FormKit>
          </div>
        </div>
  
        <!-- Navigation Buttons -->
        <div class="flex justify-between mt-6">
          <button 
            @click="prevStep" 
            class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50"
            :disabled="activeTabIndex === 0"
            :class="{ 'opacity-50 cursor-not-allowed': activeTabIndex === 0 }"
          >
            Previous
          </button>
          <button 
            @click="nextStep" 
            class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark"
            :disabled="activeTabIndex === forms.length - 1"
            :class="{ 'opacity-50 cursor-not-allowed': activeTabIndex === forms.length - 1 }"
          >
            Next
          </button>
        </div>
      </div>
  
      <div v-else-if="!loading && !error">
        <p class="text-gray-500">No forms available.</p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref, computed, watch, nextTick } from 'vue'
  import { useRoute } from 'vue-router'
  import RsButton from '~/components/RsButton.vue'
  import ConditionalLogicEngine from '~/components/ConditionalLogicEngine.vue'
  
  const loading = ref(false)
  const error = ref(null)
  const route = useRoute()
  const forms = ref([])
  const caseInstance = ref([])
  const activeTabIndex = ref(0)
  const formData = ref([])
  const submitting = ref(false)
  
  // Computed property for current form
  const currentForm = computed(() => {
    return forms.value[activeTabIndex.value] || null
  })
  
  // Navigation methods
  const nextStep = () => {
    if (activeTabIndex.value < forms.value.length - 1) {
      activeTabIndex.value++
    }
  }
  
  const prevStep = () => {
    if (activeTabIndex.value > 0) {
      activeTabIndex.value--
    }
  }

  // Check if component type is a standard FormKit input
  const isStandardInput = (type) => {
    const standardInputs = [
      'text', 'email', 'password', 'number', 'tel', 'url',
      'textarea', 'select', 'checkbox', 'radio', 'date',
      'time', 'datetime-local', 'file', 'color', 'range',
      'otp', 'mask', 'dropzone', 'switch'
    ]
    return standardInputs.includes(type)
  }

  // Check if form has a submit button component
  const hasSubmitButton = (form) => {
    if (!form.formComponents) return false
    return form.formComponents.some(comp => 
      comp.type === 'button' && 
      comp.props?.buttonType === 'submit'
    )
  }

  // Utility functions for conditional logic
  const getField = (fieldName) => {
    const currentFormData = formData.value[activeTabIndex.value] || {}
    return currentFormData[fieldName]
  }

  const showField = (fieldName) => {
    const currentForm = forms.value[activeTabIndex.value]
    if (!currentForm?.hasEditAccess) return // Don't modify fields if readonly

    const field = document.querySelector(`[name="${fieldName}"]`)
    if (field) {
      const outerDiv = field.closest('.formkit-outer')
      if (outerDiv) {
        outerDiv.style.display = ''
        outerDiv.classList.remove('hidden')
      }
    }
  }

  const hideField = (fieldName) => {
    const currentForm = forms.value[activeTabIndex.value]
    if (!currentForm?.hasEditAccess) return // Don't modify fields if readonly

    const field = document.querySelector(`[name="${fieldName}"]`)
    if (field) {
      const outerDiv = field.closest('.formkit-outer')
      if (outerDiv) {
        outerDiv.style.display = 'none'
        outerDiv.classList.add('hidden')
      }
    }
  }

  const enableField = (fieldName) => {
    const currentForm = forms.value[activeTabIndex.value]
    if (!currentForm?.hasEditAccess) return // Don't modify fields if readonly

    const field = document.querySelector(`[name="${fieldName}"]`)
    if (field) {
      field.removeAttribute('disabled')
      const outerDiv = field.closest('.formkit-outer')
      if (outerDiv) {
        outerDiv.classList.remove('opacity-50', 'pointer-events-none')
      }
    }
  }

  const disableField = (fieldName) => {
    const currentForm = forms.value[activeTabIndex.value]
    if (!currentForm?.hasEditAccess) return // Don't modify fields if readonly

    const field = document.querySelector(`[name="${fieldName}"]`)
    if (field) {
      field.setAttribute('disabled', 'disabled')
      const outerDiv = field.closest('.formkit-outer')
      if (outerDiv) {
        outerDiv.classList.add('opacity-50', 'pointer-events-none')
      }
    }
  }

  const onFieldChange = (fieldName, callback) => {
    const currentForm = forms.value[activeTabIndex.value]
    if (!currentForm?.hasEditAccess) return // Don't add listeners if readonly

    const field = document.querySelector(`[name="${fieldName}"]`)
    if (field) {
      // Remove existing listeners first to prevent duplicates
      field.removeEventListener('change', callback)
      field.removeEventListener('input', callback)
      // Add new listeners
      field.addEventListener('change', callback)
      field.addEventListener('input', callback)
    }
  }

  // Function to evaluate and apply conditional logic for all fields
  const evaluateAllFieldConditions = () => {
    const currentForm = forms.value[activeTabIndex.value]
    if (!currentForm?.formComponents) return

    // Don't apply conditional logic if user doesn't have edit access
    if (!currentForm.hasEditAccess) return

    currentForm.formComponents.forEach(component => {
      if (component.props?.conditionalLogic?.enabled) {
        const { conditions, action, operator = 'and' } = component.props.conditionalLogic
        const fieldName = component.props.name

        // Evaluate all conditions
        const results = conditions.map(condition => {
          const fieldValue = getField(condition.field)
          
          switch (condition.operator) {
            case 'equals':
              return fieldValue === condition.value
            case 'not_equals':
              return fieldValue !== condition.value
            case 'contains':
              return String(fieldValue || '').includes(condition.value)
            case 'not_contains':
              return !String(fieldValue || '').includes(condition.value)
            case 'is_empty':
              return !fieldValue || fieldValue === ''
            case 'is_not_empty':
              return fieldValue && fieldValue !== ''
            case 'greater_than':
              return Number(fieldValue) > Number(condition.value)
            case 'less_than':
              return Number(fieldValue) < Number(condition.value)
            default:
              return false
          }
        })

        // Check if conditions are met based on operator
        const conditionsMet = operator === 'and' 
          ? results.every(result => result)
          : results.some(result => result)

        // Apply visibility/state based on conditions
        if (conditionsMet) {
          if (action === 'show') showField(fieldName)
          else if (action === 'hide') hideField(fieldName)
          else if (action === 'enable') enableField(fieldName)
          else if (action === 'disable') disableField(fieldName)
        } else {
          if (action === 'show') hideField(fieldName)
          else if (action === 'hide') showField(fieldName)
          else if (action === 'enable') disableField(fieldName)
          else if (action === 'disable') enableField(fieldName)
        }
      }
    })
  }

  // Watch for form data changes to re-evaluate conditional logic
  watch(() => formData.value[activeTabIndex.value], () => {
    nextTick(() => {
      evaluateAllFieldConditions()
    })
  }, { deep: true })

  // Watch for active tab changes to re-evaluate conditional logic
  watch(activeTabIndex, () => {
    nextTick(() => {
      evaluateAllFieldConditions()
    })
  })

  // Watch for forms data to initialize conditional logic
  watch(forms, (newForms) => {
    if (newForms.length > 0) {
      nextTick(() => {
        evaluateAllFieldConditions()
      })
    }
  }, { immediate: true })

  // Handle script generated from ConditionalLogicEngine
  const handleScriptGenerated = (script) => {
    if (!script) return
    
    const currentForm = forms.value[activeTabIndex.value]
    if (!currentForm?.hasEditAccess) return // Don't execute scripts if readonly
    
    try {
      // Create a function with access to our utility functions
      const evalScript = new Function(
        'getField',
        'showField',
        'hideField',
        'enableField',
        'disableField',
        'onFieldChange',
        script
      )
      
      // Execute the script with our utility functions
      evalScript(
        getField,
        showField,
        hideField,
        enableField,
        disableField,
        onFieldChange
      )
    } catch (err) {
      console.error('Error executing conditional logic script:', err)
    }
  }

  // Handle form submission
  const handleSubmit = async (formIndex) => {
    try {
      // Check if user has edit access to this form
      const currentForm = forms.value[formIndex];
      if (!currentForm.hasEditAccess) {
        error.value = 'You do not have permission to submit this form';
        return;
      }

      submitting.value = true
      console.log(`Form ${formIndex + 1} submitted:`, formData.value[formIndex])
      
      // Example submission logic - replace with your actual API endpoint
      const response = await $fetch(`/api/cases/${route.params.id}/forms/${forms.value[formIndex].formID}/submit`, {
        method: 'POST',
        body: {
          formData: formData.value[formIndex]
        }
      })
      
      if (response.success) {
        // Move to next form if available
        if (formIndex < forms.value.length - 1) {
          activeTabIndex.value = formIndex + 1
        }
      } else {
        throw new Error(response.error || 'Form submission failed')
      }
    } catch (err) {
      console.error('Error submitting form:', err)
      error.value = err.message || 'Failed to submit form'
    } finally {
      submitting.value = false
    }
  }
  
  // Methods
  const fetchCaseInstance = async (caseId) => {
    try {
      loading.value = true;
      error.value = null;
      
      // Fetch case instance and all related forms using the API endpoint
      const response = await $fetch(`/api/cases/${caseId}/forms`);
      if (!response.success) {
        throw new Error(response.error || 'Failed to load case instance and forms');
      } else {
        caseInstance.value = response.caseInstance
        forms.value = response.forms
        console.log(response.forms)
        
        // Initialize formData array with default values for each form
        formData.value = forms.value.map(form => {
          const defaultData = {};
          
          // Set default values for form fields
          form.formComponents?.forEach(component => {
            // For select fields with options, set first option as default
            if (component.type === 'select' && component.props.options?.length > 0) {
              defaultData[component.props.name] = component.props.options[0].value;
            }
            // Add more default value logic for other field types if needed
          });
          
          return defaultData;
        });
      }
      
    } catch (err) {
      console.error('Error fetching case instance and forms:', err);
      error.value = err.message || 'Failed to load forms';
    } finally {
      loading.value = false;
    }
  };
  
  // Lifecycle hooks
  onMounted(() => {
    const caseId = route.params.id;
    if (caseId) {
      fetchCaseInstance(caseId);
    } else {
      error.value = 'No case ID provided';
      loading.value = false;
    }
  });
  </script>
  
  <style scoped>
  .grid-preview-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.5rem;
  }
  
  .grid-preview-container > div {
    grid-column: span 9;
  }
  
  /* Apply width classes */
  .w-25 { width: 25%; }
  .w-33 { width: 33.333%; }
  .w-50 { width: 50%; }
  .w-66 { width: 66.666%; }
  .w-75 { width: 75%; }
  .w-100 { width: 100%; }
  
  /* Match form-builder styling */
  :deep(.formkit-outer) {
    margin-bottom: 1rem;
  }
  
  :deep(.formkit-label) {
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
  }
  
  :deep(.formkit-input) {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: #fff;
    color: #1f2937;
  }
  
  :deep(.formkit-input:focus) {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
  }
  
  :deep(.formkit-help) {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
  }

  /* Readonly form styling */
  :deep(.formkit-form[disabled]) {
    opacity: 0.7;
    pointer-events: none;
  }

  :deep(.formkit-form[disabled] .formkit-input) {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #6b7280;
    cursor: not-allowed;
  }

  :deep(.formkit-form[disabled] .formkit-label) {
    color: #6b7280;
  }

  :deep(.formkit-form[disabled] .formkit-help) {
    color: #9ca3af;
  }

  /* Readonly input styling */
  :deep(.formkit-input[readonly]) {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #6b7280;
    cursor: not-allowed;
  }

  :deep(.formkit-input[disabled]) {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #6b7280;
    cursor: not-allowed;
  }
  </style>