<template>
  <div class="variable-browser">
    <!-- Variable Selection Input with Add Button -->
    <div class="flex items-center space-x-2">
      <div class="flex-1">
        <select
          :value="modelValue"
          @change="handleVariableSelect"
          :class="[
            'form-select w-full',
            hasError ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''
          ]"
          :disabled="disabled"
        >
          <option value="" disabled>{{ placeholder || 'Select variable' }}</option>
          <optgroup 
            v-for="group in groupedVariables" 
            :key="group.type" 
            :label="group.label"
          >
            <option
              v-for="variable in group.variables"
              :key="variable.name"
              :value="variable.name"
              :title="variable.description || `${variable.type} variable`"
            >
              {{ variable.name }} ({{ variable.type }})
              <span v-if="variable.currentValue !== undefined && variable.currentValue !== null">
                = {{ formatPreviewValue(variable.currentValue, variable.type) }}
              </span>
            </option>
          </optgroup>
        </select>
      </div>
      
      <!-- Add Variable Button (if allowed) -->
      <RsButton 
        v-if="allowCreate"
        @click.stop="openCreateVariable" 
        variant="secondary" 
        size="sm"
        :disabled="disabled"
        title="Create new variable"
        class="flex-shrink-0"
      >
        <Icon name="material-symbols:add" class="w-4 h-4" />
      </RsButton>
    </div>

    <!-- Variable Info Display -->
    <div v-if="selectedVariable" class="mt-2 p-2 bg-gray-50 rounded-md border text-sm">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-2">
          <span 
            class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
            :class="getTypeColorClass(selectedVariable.type)"
          >
            {{ selectedVariable.type }}
          </span>
          <span class="font-medium">{{ selectedVariable.name }}</span>
        </div>
        <div v-if="selectedVariable.currentValue !== undefined" class="text-gray-600">
          Current: {{ formatPreviewValue(selectedVariable.currentValue, selectedVariable.type) }}
        </div>
      </div>
      <div v-if="selectedVariable.description" class="mt-1 text-gray-600">
        {{ selectedVariable.description }}
      </div>
    </div>

    <!-- Error Display -->
    <div v-if="hasError" class="mt-1 text-red-600 text-sm flex items-center">
      <Icon name="material-symbols:error" class="w-4 h-4 mr-1" />
      {{ errorMessage }}
    </div>

    <!-- Create Variable Modal (if enabled) -->
    <Teleport to="body">
      <div
        v-if="showCreateVariable"
        class="variable-modal-overlay"
        @click.self="closeCreateVariable"
      >
        <div class="variable-modal-dialog">
          <div class="variable-modal-content">
            <!-- Modal Header -->
            <div class="variable-modal-header">
              <h4 class="text-lg font-semibold text-gray-900">Create New Variable</h4>
              <button
                @click="closeCreateVariable"
                class="text-gray-400 hover:text-gray-600 transition-colors"
                title="Close"
              >
                <Icon name="material-symbols:close" class="w-5 h-5" />
              </button>
            </div>
            
            <!-- Modal Body -->
            <div class="variable-modal-body">
              <div class="space-y-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">Variable Name</label>
                  <input
                    v-model="newVariableName"
                    type="text"
                    placeholder="Enter variable name"
                    class="w-full p-2 border border-gray-300 rounded-md focus:border-purple-500 focus:ring focus:ring-purple-200"
                    @input="validateVariableName"
                  />
                  <div v-if="nameValidationError" class="mt-1 text-red-600 text-sm">
                    {{ nameValidationError }}
                  </div>
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">Data Type</label>
                  <select
                    v-model="newVariableType"
                    class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200"
                  >
                    <option value="string">String (Text)</option>
                    <option value="int">Integer (Whole Number)</option>
                    <option value="decimal">Decimal (Number with decimals)</option>
                    <option value="boolean">Boolean (True/False)</option>
                    <option value="date">Date</option>
                    <option value="datetime">DateTime</option>
                    <option value="object">Object (JSON)</option>
                  </select>
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">Default Value (Optional)</label>
                  <input
                    v-model="newVariableDefaultValue"
                    type="text"
                    placeholder="Enter default value"
                    class="w-full p-2 border border-gray-300 rounded-md focus:border-purple-500 focus:ring focus:ring-purple-200"
                  />
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">Description (Optional)</label>
                  <textarea
                    v-model="newVariableDescription"
                    placeholder="Describe what this variable is used for"
                    rows="2"
                    class="w-full p-2 border border-gray-300 rounded-md focus:border-purple-500 focus:ring focus:ring-purple-200"
                  ></textarea>
                </div>
              </div>
            </div>
            
            <!-- Modal Footer -->
            <div class="variable-modal-footer">
              <RsButton @click="closeCreateVariable" variant="secondary">
                Cancel
              </RsButton>
              <RsButton 
                @click="createVariable" 
                variant="primary"
                :disabled="!canCreateVariable"
              >
                Create Variable
              </RsButton>
            </div>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useProcessBuilderStore } from '~/stores/processBuilder';
import { Icon } from '#components';

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  availableVariables: {
    type: Array,
    default: () => []
  },
  placeholder: {
    type: String,
    default: 'Select variable'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  allowCreate: {
    type: Boolean,
    default: true
  },
  filterTypes: {
    type: Array,
    default: () => [] // If specified, only show variables of these types
  },
  required: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'variable-created']);

const processStore = useProcessBuilderStore();

// Create variable state
const showCreateVariable = ref(false);
const newVariableName = ref('');
const newVariableType = ref('string');
const newVariableDefaultValue = ref('');
const newVariableDescription = ref('');
const nameValidationError = ref('');

// Computed properties
const selectedVariable = computed(() => {
  return props.availableVariables.find(v => v.name === props.modelValue);
});

const hasError = computed(() => {
  if (!props.required && !props.modelValue) return false;
  if (props.modelValue && !selectedVariable.value) return true;
  return false;
});

const errorMessage = computed(() => {
  if (props.required && !props.modelValue) {
    return 'Variable selection is required';
  }
  if (props.modelValue && !selectedVariable.value) {
    return `Variable "${props.modelValue}" not found`;
  }
  return '';
});

const groupedVariables = computed(() => {
  const types = {
    string: { label: 'Text Variables', variables: [] },
    int: { label: 'Integer Variables', variables: [] },
    decimal: { label: 'Decimal Variables', variables: [] },
    boolean: { label: 'Boolean Variables', variables: [] },
    date: { label: 'Date Variables', variables: [] },
    datetime: { label: 'DateTime Variables', variables: [] },
    object: { label: 'Object Variables', variables: [] }
  };

  let variables = props.availableVariables;
  
  // Filter by allowed types if specified
  if (props.filterTypes.length > 0) {
    variables = variables.filter(v => props.filterTypes.includes(v.type));
  }

  variables.forEach(variable => {
    const type = variable.type || 'string';
    if (types[type]) {
      types[type].variables.push(variable);
    }
  });

  return Object.values(types).filter(group => group.variables.length > 0);
});

const canCreateVariable = computed(() => {
  return newVariableName.value.trim() && 
         newVariableType.value && 
         !nameValidationError.value;
});

// Methods
const handleVariableSelect = (event) => {
  emit('update:modelValue', event.target.value);
};

const openCreateVariable = () => {
  showCreateVariable.value = true;
  resetCreateForm();
};

const closeCreateVariable = () => {
  showCreateVariable.value = false;
  resetCreateForm();
};

const resetCreateForm = () => {
  newVariableName.value = '';
  newVariableType.value = 'string';
  newVariableDefaultValue.value = '';
  newVariableDescription.value = '';
  nameValidationError.value = '';
};

const validateVariableName = () => {
  const name = newVariableName.value.trim();
  
  if (!name) {
    nameValidationError.value = '';
    return;
  }

  // Check if name already exists
  if (props.availableVariables.some(v => v.name === name)) {
    nameValidationError.value = 'Variable name already exists';
    return;
  }

  // Check if name is valid (alphanumeric and underscore only)
  if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(name)) {
    nameValidationError.value = 'Variable name must start with letter or underscore and contain only letters, numbers, and underscores';
    return;
  }

  nameValidationError.value = '';
};

const createVariable = () => {
  if (!canCreateVariable.value) return;

  const newVariable = {
    name: newVariableName.value.trim(),
    type: newVariableType.value,
    defaultValue: newVariableDefaultValue.value || null,
    description: newVariableDescription.value.trim() || null
  };

  // Add to process store
  processStore.addProcessVariable(newVariable);

  // Select the new variable
  emit('update:modelValue', newVariable.name);
  emit('variable-created', newVariable);

  closeCreateVariable();
};

const getTypeColorClass = (type) => {
  const classes = {
    string: 'bg-blue-100 text-blue-800',
    int: 'bg-purple-100 text-purple-800',
    decimal: 'bg-purple-100 text-purple-800',
    boolean: 'bg-indigo-100 text-indigo-800',
    date: 'bg-amber-100 text-amber-800',
    datetime: 'bg-amber-100 text-amber-800',
    object: 'bg-emerald-100 text-emerald-800'
  };
  return classes[type] || 'bg-gray-100 text-gray-800';
};

const formatPreviewValue = (value, type) => {
  if (value === null || value === undefined) return 'null';
  
  switch (type) {
    case 'string':
      return value.length > 20 ? `"${value.substring(0, 20)}..."` : `"${value}"`;
    case 'boolean':
      return value ? 'true' : 'false';
    case 'object':
      try {
        const str = typeof value === 'string' ? value : JSON.stringify(value);
        return str.length > 30 ? `${str.substring(0, 30)}...` : str;
      } catch {
        return 'Invalid JSON';
      }
    default:
      return String(value);
  }
};
</script>

<style scoped>
.variable-browser .form-select {
  @apply block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 text-sm;
}

.variable-browser .form-select:disabled {
  @apply bg-gray-100 text-gray-500 cursor-not-allowed;
}

/* Custom Variable Modal Styles */
.variable-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
  overflow-y: auto;
  padding-top: 2rem;
}

.variable-modal-dialog {
  position: relative;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  margin: 1.5rem auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3rem);
  width: 100%;
  max-width: 500px;
  animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.variable-modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.variable-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background-color: #f9fafb;
  border-radius: 0.5rem 0.5rem 0 0;
}

.variable-modal-body {
  padding: 1.5rem;
  flex: 1;
  overflow-y: auto;
}

.variable-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
  border-radius: 0 0 0.5rem 0.5rem;
}
</style>

<style>
/* Prevent body scroll when modal is open */
body:has(.variable-modal-overlay) {
  overflow: hidden;
}
</style> 