<template>
  <div class="min-h-screen bg-slate-50 dark:bg-slate-900">
    <Head :title="$t(title)" />

    <div class="bg-white dark:bg-slate-800 shadow-sm border-b border-slate-200 dark:border-slate-700">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white">{{ $t('Navigation Menus') }}</h1>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $t('Manage the public site header menu') }}</p>
          </div>
          <Link
            :href="route('menus.create')"
            class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            <Plus class="w-4 h-4" />
            {{ $t('Add Menu Item') }}
          </Link>
        </div>
      </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="mb-6 bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-4">
        <SearchInput
          v-model="form.search"
          :placeholder="$t('Search menu items...')"
          @reset="reset"
          class="w-full max-w-md"
        />
      </div>

      <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg border border-slate-200 dark:border-slate-700 overflow-hidden">
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-slate-50 dark:bg-slate-700/50">
              <tr>
                <th class="px-6 py-4 text-left text-xs font-medium text-slate-500 dark:text-slate-300 uppercase">{{ $t('Order') }}</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-slate-500 dark:text-slate-300 uppercase">{{ $t('Label') }}</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-slate-500 dark:text-slate-300 uppercase">{{ $t('Link') }}</th>
                <th class="px-6 py-4 text-left text-xs font-medium text-slate-500 dark:text-slate-300 uppercase">{{ $t('Status') }}</th>
                <th class="px-6 py-4 text-right text-xs font-medium text-slate-500 dark:text-slate-300 uppercase">{{ $t('Actions') }}</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
              <tr v-for="(menu, index) in menus.data" :key="menu.id" class="hover:bg-slate-50 dark:hover:bg-slate-700/50">
                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{{ menu.sort_order }}</td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex items-center gap-2">
                    <icon v-if="menu.icon" :name="menu.icon" class="w-4 h-4 text-slate-400" />
                    <span class="font-medium text-slate-900 dark:text-white">{{ menu.label }}</span>
                  </div>
                </td>
                <td class="px-6 py-4 text-sm text-slate-500 dark:text-slate-400">
                  <span v-if="menu.route_name" class="font-mono text-xs">{{ menu.route_name }}</span>
                  <span v-else>{{ menu.url }}</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span
                    class="inline-flex px-2 py-1 text-xs font-medium rounded-full"
                    :class="menu.is_active ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' : 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400'"
                  >
                    {{ menu.is_active ? $t('Active') : $t('Inactive') }}
                  </span>
                </td>
                <td class="px-6 py-4 text-right">
                  <div class="flex items-center justify-end gap-2">
                    <button
                      v-if="index > 0"
                      type="button"
                      class="p-2 text-slate-500 hover:text-blue-600"
                      :title="$t('Move up')"
                      @click="moveItem(menu, -1)"
                    >
                      <ChevronUp class="w-4 h-4" />
                    </button>
                    <button
                      v-if="index < menus.data.length - 1"
                      type="button"
                      class="p-2 text-slate-500 hover:text-blue-600"
                      :title="$t('Move down')"
                      @click="moveItem(menu, 1)"
                    >
                      <ChevronDown class="w-4 h-4" />
                    </button>
                    <Link
                      :href="route('menus.edit', menu.id)"
                      class="inline-flex items-center gap-1 px-3 py-1.5 text-sm text-slate-600 hover:text-blue-600"
                    >
                      <Edit class="w-4 h-4" />
                      {{ $t('Edit') }}
                    </Link>
                    <button
                      type="button"
                      class="inline-flex items-center gap-1 px-3 py-1.5 text-sm text-red-600 hover:text-red-700"
                      @click="deleteMenu(menu)"
                    >
                      <Trash2 class="w-4 h-4" />
                      {{ $t('Delete') }}
                    </button>
                  </div>
                </td>
              </tr>
              <tr v-if="menus.data.length === 0">
                <td colspan="5" class="px-6 py-12 text-center text-slate-500">{{ $t('No menu items found.') }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="mt-8">
        <Pagination :links="menus.links" />
      </div>
    </div>

    <DeleteConfirmation
      :show="showDeleteModal"
      :title="deleteConfig.title"
      :message="deleteConfig.message"
      :item-name="deleteConfig.itemName"
      :delete-url="deleteConfig.deleteUrl"
      @close="hideDeleteConfirmation"
      @confirm="confirmDelete"
    />
  </div>
</template>

<script>
import { Link, Head, router } from '@inertiajs/vue3'
import Layout from '@/Shared/Layout.vue'
import SearchInput from '@/Shared/SearchInput.vue'
import Pagination from '@/Shared/Pagination.vue'
import DeleteConfirmation from '@/Shared/DeleteConfirmation.vue'
import Icon from '@/Shared/Icon.vue'
import { Plus, Edit, Trash2, ChevronUp, ChevronDown } from 'lucide-vue-next'
import pickBy from 'lodash/pickBy'
import throttle from 'lodash/throttle'
import mapValues from 'lodash/mapValues'

export default {
  layout: Layout,
  components: {
    Link,
    Head,
    SearchInput,
    Pagination,
    DeleteConfirmation,
    Icon,
    Plus,
    Edit,
    Trash2,
    ChevronUp,
    ChevronDown,
  },
  props: {
    title: String,
    filters: Object,
    menus: Object,
  },
  data() {
    return {
      form: { search: this.filters.search },
      showDeleteModal: false,
      deleteConfig: {
        title: 'Are you sure?',
        message: 'This menu item will be removed from the public navigation.',
        itemName: '',
        deleteUrl: '',
      },
    }
  },
  watch: {
    form: {
      deep: true,
      handler: throttle(function () {
        this.$inertia.get(this.route('menus'), pickBy(this.form), { preserveState: true, replace: true })
      }, 300),
    },
  },
  methods: {
    reset() {
      this.form = mapValues(this.form, () => null)
    },
    deleteMenu(menu) {
      this.deleteConfig.itemName = menu.label
      this.deleteConfig.deleteUrl = this.route('menus.destroy', menu.id)
      this.showDeleteModal = true
    },
    hideDeleteConfirmation() {
      this.showDeleteModal = false
    },
    confirmDelete() {
      this.hideDeleteConfirmation()
    },
    moveItem(menu, direction) {
      const items = [...this.menus.data]
      const index = items.findIndex((item) => item.id === menu.id)
      const swapIndex = index + direction
      if (swapIndex < 0 || swapIndex >= items.length) return

      const current = items[index]
      const swap = items[swapIndex]
      const payload = {
        items: [
          { id: current.id, sort_order: swap.sort_order },
          { id: swap.id, sort_order: current.sort_order },
        ],
      }

      router.post(this.route('menus.reorder'), payload, { preserveScroll: true })
    },
  },
}
</script>
