<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 flex items-center justify-between">
        <div>
          <h1 class="text-2xl font-bold text-slate-900 dark:text-white">{{ $t('Services Management') }}</h1>
          <p class="text-sm text-slate-500 dark:text-slate-400">{{ $t('Manage public service detail pages') }}</p>
        </div>
        <Link :href="route('dashboard.services.create')" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
          <Plus class="w-4 h-4" />
          {{ $t('Create Service') }}
        </Link>
      </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 p-4 border border-slate-200 dark:border-slate-700">
        <SearchInput v-model="form.search" class="w-full" @reset="reset" :placeholder="$t('Search services...')" />
      </div>

      <div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden">
        <table class="w-full">
          <thead class="bg-slate-50 dark:bg-slate-700">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">{{ $t('Service') }}</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">{{ $t('Slug') }}</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">{{ $t('Status') }}</th>
              <th class="px-6 py-3 text-right text-xs font-medium text-slate-500 uppercase">{{ $t('Actions') }}</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
            <tr v-for="service in services.data" :key="service.id">
              <td class="px-6 py-4">{{ service.title }}</td>
              <td class="px-6 py-4 text-slate-500">{{ service.slug }}</td>
              <td class="px-6 py-4">
                <span :class="service.isActive ? 'text-green-600' : 'text-red-600'">{{ service.isActive ? $t('Active') : $t('Inactive') }}</span>
              </td>
              <td class="px-6 py-4 text-right">
                <Link :href="route('dashboard.services.edit', service.slug)" class="text-blue-600 hover:text-blue-700">{{ $t('Edit') }}</Link>
              </td>
            </tr>
          </tbody>
        </table>
        <div v-if="services.data.length === 0" class="text-center py-12 text-slate-500">{{ $t('No services found') }}</div>
      </div>

      <div class="mt-6">
        <Pagination :links="services.links" />
      </div>
    </div>
  </div>
</template>

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

export default {
  layout: Layout,
  components: { Head, Link, SearchInput, Pagination, Plus },
  props: { services: Object, filters: Object, title: String },
  data() {
    return {
      form: {
        search: this.filters.search,
      },
    }
  },
  methods: {
    search: throttle(function () {
      this.$inertia.get(route('dashboard.services'), pickBy(this.form), { preserveState: true })
    }, 300),
    reset() {
      this.form = mapValues(this.form, () => null)
      this.$inertia.get(route('dashboard.services'))
    },
  },
  watch: {
    form: {
      deep: true,
      handler: throttle(function () {
        this.search()
      }, 300),
    },
  },
}
</script>
