<script setup lang="ts">
import AppSidebar from '@/components/AppSidebar.vue'
import SiteHeader from '@/components/SiteHeader.vue'
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'

import { ChevronDown, Loader2, Plus, X } from '@lucide/vue'
import { computed, ref, watch } from 'vue'
import { toast } from 'vue-sonner'

import DataTable from '@/components/data-table/DataTable.vue'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Field,
  FieldGroup,
  FieldLabel,
} from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { type BusinessType, getColumns } from './columns'

const config = useRuntimeConfig()

const { data: businessTypes, status, refresh } = useFetch<BusinessType[]>(`${config.public.apiBase}/business-types`)

const tableRef = ref<InstanceType<typeof DataTable>>()

// --- Dialog states ---
const formOpen = ref(false)
const deleteOpen = ref(false)

// --- Form state ---
type FormMode = 'create' | 'edit'

const formMode = ref<FormMode>('create')
const selectedBusinessType = ref<BusinessType | null>(null)

interface FormData {
  name: string
  description: string
}

const form = ref<FormData>({ name: '', description: '' })

// --- Loading states ---
const formLoading = ref(false)
const deleteLoading = ref(false)

// --- Computed ---
const formTitle = computed(() => formMode.value === 'create' ? 'Tambah Jenis Bisnis' : 'Edit Jenis Bisnis')

// --- Table callbacks ---
function openCreateForm() {
  formMode.value = 'create'
  selectedBusinessType.value = null
  form.value = { name: '', description: '' }
  formOpen.value = true
}

function handleEdit(bt: BusinessType) {
  formMode.value = 'edit'
  selectedBusinessType.value = bt
  form.value = {
    name: bt.name,
    description: bt.description ?? '',
  }
  formOpen.value = true
}

function handleDelete(bt: BusinessType) {
  selectedBusinessType.value = bt
  deleteOpen.value = true
}

async function handleToggleStatus(bt: BusinessType, value: boolean) {
  try {
    await $fetch(`${config.public.apiBase}/business-types/${bt.id}/active`, {
      method: 'PATCH',
      body: { is_active: value },
    })
    if (businessTypes.value) {
      businessTypes.value = businessTypes.value.map(b =>
        b.id === bt.id ? { ...b, is_active: value } : b
      )
    }
    toast.success(`Jenis bisnis berhasil di${value ? 'aktifkan' : 'nonaktifkan'}`)
  } catch (e: any) {
    toast.error(e?.data?.message ?? 'Gagal mengubah status')
  }
}

const columns = computed(() => getColumns({ onEdit: handleEdit, onDelete: handleDelete, onToggleStatus: handleToggleStatus }))

// --- CRUD operations ---
async function handleFormSubmit() {
  if (!form.value.name.trim()) {
    toast.error('Nama wajib diisi')
    return
  }

  formLoading.value = true
  try {
    if (formMode.value === 'create') {
      await $fetch(`${config.public.apiBase}/business-types`, {
        method: 'POST',
        body: {
          name: form.value.name.trim(),
          description: form.value.description.trim() || null,
        },
      })
      toast.success('Jenis bisnis berhasil ditambahkan')
    } else {
      await $fetch(`${config.public.apiBase}/business-types/${selectedBusinessType.value!.id}`, {
        method: 'PUT',
        body: {
          name: form.value.name.trim(),
          description: form.value.description.trim() || null,
        },
      })
      toast.success('Jenis bisnis berhasil diperbarui')
    }

    formOpen.value = false
    await refresh()
  } catch (e: any) {
    toast.error(e?.data?.message ?? 'Gagal menyimpan jenis bisnis')
  } finally {
    formLoading.value = false
  }
}

async function handleConfirmDelete() {
  if (!selectedBusinessType.value) return

  deleteLoading.value = true
  try {
    await $fetch(`${config.public.apiBase}/business-types/${selectedBusinessType.value.id}`, {
      method: 'DELETE',
    })
    toast.success('Jenis bisnis berhasil dihapus')
    deleteOpen.value = false
    selectedBusinessType.value = null
    await refresh()
  } catch (e: any) {
    toast.error(e?.data?.message ?? 'Gagal menghapus jenis bisnis')
  } finally {
    deleteLoading.value = false
  }
}

// --- Filters ---
function getStatusFilter(table: any) {
  const val = table.getColumn('is_active')?.getFilterValue()
  if (val === true || val === 'true' || val === 1) return 'true'
  if (val === false || val === 'false' || val === 0) return 'false'
  return 'all'
}

function hasActiveFilter(table: any) {
  const search = table.getColumn('name_search')?.getFilterValue()
  const status = table.getColumn('is_active')?.getFilterValue()
  return (search && search !== '') || (status !== '' && status !== undefined && status !== null)
}

function resetFilters(table: any) {
  table.getColumn('name_search')?.setFilterValue('')
  table.getColumn('is_active')?.setFilterValue('')
}

// --- Reset on dialog close ---
watch(formOpen, (val) => {
  if (!val) {
    form.value = { name: '', description: '' }
    selectedBusinessType.value = null
  }
})

watch(deleteOpen, (val) => {
  if (!val) selectedBusinessType.value = null
})
</script>

<template>
  <SidebarProvider :style="{
    '--sidebar-width': 'calc(var(--spacing) * 72)',
    '--header-height': 'calc(var(--spacing) * 12)',
  }">
    <AppSidebar variant="inset" />
    <SidebarInset>
      <SiteHeader />
      <div class="flex flex-1 flex-col">
        <div class="@container/main flex flex-1 flex-col gap-2">
          <div class="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
            <div class="px-4 lg:px-6">
              <div class="flex items-center justify-between">
                <h1 class="text-2xl font-bold">Jenis Bisnis</h1>
                <Button size="sm" @click="openCreateForm">
                  <Plus class="h-4 w-4 mr-1" />
                  Tambah
                </Button>
              </div>
            </div>
            <div class="px-4 lg:px-6">
              <DataTable ref="tableRef" :columns="columns" :data="businessTypes ?? []" :loading="status === 'pending'">
                <template #filters="{ table }">
                  <div class="flex items-center gap-2 py-4">
                    <Input class="max-w-sm" placeholder="Cari nama..."
                      :model-value="(table.getColumn('name_search')?.getFilterValue() as string) ?? ''"
                      @update:model-value="table.getColumn('name_search')?.setFilterValue($event)" />
                    <Select :model-value="getStatusFilter(table)"
                      @update:model-value="table.getColumn('is_active')?.setFilterValue($event === 'all' ? '' : $event)">
                      <SelectTrigger class="hidden h-8 w-auto md:flex">
                        <SelectValue placeholder="Semua Status" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Semua Status</SelectItem>
                        <SelectItem value="true">Aktif</SelectItem>
                        <SelectItem value="false">Nonaktif</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button v-if="hasActiveFilter(table)" variant="ghost" size="sm" class="h-8"
                      @click="resetFilters(table)">
                      <X class="h-4 w-4 mr-1" />
                      Reset
                    </Button>
                    <DropdownMenu>
                      <DropdownMenuTrigger as-child>
                        <Button variant="outline" class="ml-auto md:hidden">
                          Filter
                          <ChevronDown class="ml-2 h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuLabel>Status</DropdownMenuLabel>
                        <div class="px-2 pb-2">
                          <Select :model-value="getStatusFilter(table)"
                            @update:model-value="table.getColumn('is_active')?.setFilterValue($event === 'all' ? '' : $event)">
                            <SelectTrigger class="h-8 w-37.5">
                              <SelectValue placeholder="Semua Status" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="all">Semua Status</SelectItem>
                              <SelectItem value="true">Aktif</SelectItem>
                              <SelectItem value="false">Nonaktif</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem :disabled="!hasActiveFilter(table)" @click="resetFilters(table)">
                          Reset Filter
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </template>
              </DataTable>
            </div>
          </div>
        </div>
      </div>
    </SidebarInset>

    <!-- ==================== FORM DIALOG (CREATE / EDIT) ==================== -->
    <Dialog v-model:open="formOpen">
      <DialogContent class="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>{{ formTitle }}</DialogTitle>
        </DialogHeader>
        <form id="businessTypeForm" @submit.prevent="handleFormSubmit">
          <FieldGroup class="gap-4">
            <Field>
              <FieldLabel for="form-name">Nama <span class="text-red-500">*</span></FieldLabel>
              <Input id="form-name" v-model="form.name" placeholder="Masukkan nama" :disabled="formLoading" />
            </Field>
            <Field>
              <FieldLabel for="form-description">Deskripsi</FieldLabel>
              <textarea id="form-description" v-model="form.description" placeholder="Masukkan deskripsi (opsional)"
                :disabled="formLoading" rows="3"
                class="flex w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" />
            </Field>
          </FieldGroup>
        </form>
        <DialogFooter>
          <DialogClose as-child>
            <Button variant="outline" :disabled="formLoading">Batal</Button>
          </DialogClose>
          <Button type="submit" form="businessTypeForm" :disabled="formLoading">
            <Loader2 v-if="formLoading" class="h-4 w-4 mr-1 animate-spin" />
            Simpan
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>

    <!-- ==================== DELETE DIALOG ==================== -->
    <DeleteDialog v-model:open="deleteOpen" title="Hapus Jenis Bisnis" :item-name="selectedBusinessType?.name"
      :loading="deleteLoading" @confirm="handleConfirmDelete" />
  </SidebarProvider>
</template>
