<script setup>
definePageMeta({
  title: "Application Resources",
  middleware: ["auth"],
  requiresAuth: true,
  breadcrumb: [
    { name: "Dashboard", path: "/dashboard" },
    { name: "Applications", path: "/applications" },
    { name: "Resources", path: "/applications/resources", type: "current" }
  ]
});

import { ref, reactive, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const activeTab = ref('menus')

// Application selector (in real app, this would be populated from API)
const applications = ref([
  { id: '1', name: 'corradAF', description: 'Main Application', status: 'active' },
  { id: '2', name: 'HR System', description: 'Human Resources', status: 'active' },
  { id: '3', name: 'Finance System', description: 'Financial Management', status: 'development' }
])

const selectedAppId = ref(route.query.appId || '1')

// Resources state management
const resources = reactive({
  menus: [
    { id: '1', key: 'menu.dashboard', name: 'Dashboard', path: '/dashboard', level: 0 },
    { id: '2', key: 'menu.users', name: 'Users', path: '/users', level: 0 }
  ],
  components: [
    { id: '1', key: 'component.user.edit_button', name: 'User Edit Button' },
    { id: '2', key: 'component.user.delete_button', name: 'User Delete Button' }
  ],
  features: [
    { id: '1', key: 'feature.export.data', name: 'Export Data' },
    { id: '2', key: 'feature.approve.requests', name: 'Approve Requests' }
  ]
})

// Form states
const menuForm = reactive({
  name: '',
  key: '',
  path: '',
  level: 0
})

const componentForm = reactive({
  name: '',
  key: ''
})

const featureForm = reactive({
  name: '',
  key: ''
})

// Form handlers
const handleMenuSubmit = (data) => {
  const newMenu = {
    id: Date.now().toString(),
    ...data
  }
  resources.menus.push(newMenu)
  menuForm.name = ''
  menuForm.key = ''
  menuForm.path = ''
  menuForm.level = 0
}

const handleComponentSubmit = (data) => {
  const newComponent = {
    id: Date.now().toString(),
    ...data
  }
  resources.components.push(newComponent)
  componentForm.name = ''
  componentForm.key = ''
}

const handleFeatureSubmit = (data) => {
  const newFeature = {
    id: Date.now().toString(),
    ...data
  }
  resources.features.push(newFeature)
  featureForm.name = ''
  featureForm.key = ''
}

// Delete handlers
const deleteMenu = (id) => {
  resources.menus = resources.menus.filter(menu => menu.id !== id)
}

const deleteComponent = (id) => {
  resources.components = resources.components.filter(component => component.id !== id)
}

const deleteFeature = (id) => {
  resources.features = resources.features.filter(feature => feature.id !== id)
}

// Auto-generate keys based on names
const generateKey = (prefix, name) => {
  return `${prefix}.${name.toLowerCase().replace(/\s+/g, '_')}`
}

const updateMenuKey = (name) => {
  menuForm.key = generateKey('menu', name)
}

const updateComponentKey = (name) => {
  componentForm.key = generateKey('component', name)
}

const updateFeatureKey = (name) => {
  featureForm.key = generateKey('feature', name)
}
</script>

<template>
  <div>
    <LayoutsBreadcrumb />
    
    <!-- Header -->
    <rs-card class="mb-6">
      <template #body>
        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
          <div class="mb-4 lg:mb-0">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Application Resources</h1>
            <p class="text-gray-600 dark:text-gray-400">Manage menus, components, and features for your application</p>
          </div>

          <!-- Application Selector -->
          <div class="min-w-48">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Application</label>
            <select 
              v-model="selectedAppId" 
              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            >
              <option v-for="app in applications" :key="app.id" :value="app.id">
                {{ app.name }}
              </option>
            </select>
          </div>
        </div>
      </template>
    </rs-card>

    <!-- Tab Navigation -->
    <div class="mb-6">
      <nav class="flex space-x-8 border-b border-gray-200 dark:border-gray-700">
        <button
          v-for="tab in [
            { id: 'menus', name: 'Menus', icon: 'ph:list' },
            { id: 'components', name: 'Components', icon: 'ph:squares-four' },
            { id: 'features', name: 'Features', icon: 'ph:gear' }
          ]"
          :key="tab.id"
          @click="activeTab = tab.id"
          :class="[
            'flex items-center py-2 px-1 border-b-2 font-medium text-sm transition-colors',
            activeTab === tab.id
              ? 'border-primary text-primary'
              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
          ]"
        >
          <Icon :name="tab.icon" class="w-5 h-5 mr-2" />
          {{ tab.name }}
        </button>
      </nav>
    </div>

    <!-- Content -->
    <div class="space-y-6">
      <!-- Menus Tab -->
      <div v-if="activeTab === 'menus'" class="space-y-6">
        <!-- Add Menu Form -->
        <rs-card>
          <template #header>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Add New Menu</h3>
          </template>
          <template #body>
            <FormKit
              type="form"
              :config="{ validationVisibility: 'submit' }"
              @submit="handleMenuSubmit"
              :value="menuForm"
              :actions="false"
            >
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <FormKit
                  type="text"
                  name="name"
                  label="Menu Name"
                  validation="required"
                  @input="updateMenuKey($event)"
                />
                
                <FormKit
                  type="text"
                  name="key"
                  label="Menu Key"
                  validation="required"
                  help="Unique identifier for this menu"
                  :disabled="true"
                />

                <FormKit
                  type="text"
                  name="path"
                  label="Menu Path"
                  validation="required"
                  help="URL path for this menu item (e.g., /dashboard)"
                />

                <FormKit
                  type="number"
                  name="level"
                  label="Menu Level"
                  validation="required|min:0"
                  help="0 for root level, 1+ for nested items"
                />
              </div>

              <div class="mt-6 flex justify-end">
                <rs-button type="submit" variant="primary">
                  <Icon name="ph:plus" class="w-4 h-4 mr-2" />
                  Add Menu
                </rs-button>
              </div>
            </FormKit>
          </template>
        </rs-card>

        <!-- Menu List -->
        <rs-card>
          <template #header>
            <div class="flex items-center justify-between">
              <h3 class="text-lg font-medium text-gray-900 dark:text-white">Menu Items</h3>
              <rs-badge variant="secondary">{{ resources.menus.length }} items</rs-badge>
            </div>
          </template>
          <template #body>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-800">
                  <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Key</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Path</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Level</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
                  </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                  <tr v-for="menu in resources.menus" :key="menu.id">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                      {{ menu.name }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-mono">
                      {{ menu.key }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                      {{ menu.path }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                      {{ menu.level }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
                      <rs-button @click="deleteMenu(menu.id)" variant="danger-outline" size="sm">
                        <Icon name="ph:trash" class="w-4 h-4" />
                      </rs-button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </template>
        </rs-card>
      </div>

      <!-- Components Tab -->
      <div v-if="activeTab === 'components'" class="space-y-6">
        <!-- Add Component Form -->
        <rs-card>
          <template #header>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Add New Component</h3>
          </template>
          <template #body>
            <FormKit
              type="form"
              :config="{ validationVisibility: 'submit' }"
              @submit="handleComponentSubmit"
              :value="componentForm"
              :actions="false"
            >
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <FormKit
                  type="text"
                  name="name"
                  label="Component Name"
                  validation="required"
                  @input="updateComponentKey($event)"
                />
                
                <FormKit
                  type="text"
                  name="key"
                  label="Component Key"
                  validation="required"
                  help="Unique identifier for this component"
                  :disabled="true"
                />
              </div>

              <div class="mt-6 flex justify-end">
                <rs-button type="submit" variant="primary">
                  <Icon name="ph:plus" class="w-4 h-4 mr-2" />
                  Add Component
                </rs-button>
              </div>
            </FormKit>
          </template>
        </rs-card>

        <!-- Component List -->
        <rs-card>
          <template #header>
            <div class="flex items-center justify-between">
              <h3 class="text-lg font-medium text-gray-900 dark:text-white">Components</h3>
              <rs-badge variant="secondary">{{ resources.components.length }} items</rs-badge>
            </div>
          </template>
          <template #body>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-800">
                  <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Key</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
                  </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                  <tr v-for="component in resources.components" :key="component.id">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                      {{ component.name }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-mono">
                      {{ component.key }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
                      <rs-button @click="deleteComponent(component.id)" variant="danger-outline" size="sm">
                        <Icon name="ph:trash" class="w-4 h-4" />
                      </rs-button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </template>
        </rs-card>
      </div>

      <!-- Features Tab -->
      <div v-if="activeTab === 'features'" class="space-y-6">
        <!-- Add Feature Form -->
        <rs-card>
          <template #header>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">Add New Feature</h3>
          </template>
          <template #body>
            <FormKit
              type="form"
              :config="{ validationVisibility: 'submit' }"
              @submit="handleFeatureSubmit"
              :value="featureForm"
              :actions="false"
            >
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <FormKit
                  type="text"
                  name="name"
                  label="Feature Name"
                  validation="required"
                  @input="updateFeatureKey($event)"
                />
                
                <FormKit
                  type="text"
                  name="key"
                  label="Feature Key"
                  validation="required"
                  help="Unique identifier for this feature"
                  :disabled="true"
                />
              </div>

              <div class="mt-6 flex justify-end">
                <rs-button type="submit" variant="primary">
                  <Icon name="ph:plus" class="w-4 h-4 mr-2" />
                  Add Feature
                </rs-button>
              </div>
            </FormKit>
          </template>
        </rs-card>

        <!-- Feature List -->
        <rs-card>
          <template #header>
            <div class="flex items-center justify-between">
              <h3 class="text-lg font-medium text-gray-900 dark:text-white">Features</h3>
              <rs-badge variant="secondary">{{ resources.features.length }} items</rs-badge>
            </div>
          </template>
          <template #body>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-800">
                  <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Key</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
                  </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                  <tr v-for="feature in resources.features" :key="feature.id">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                      {{ feature.name }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-mono">
                      {{ feature.key }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
                      <rs-button @click="deleteFeature(feature.id)" variant="danger-outline" size="sm">
                        <Icon name="ph:trash" class="w-4 h-4" />
                      </rs-button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </template>
        </rs-card>
      </div>
    </div>
  </div>
</template> 