<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import { ExternalLink, Plus, Search } from '@lucide/vue';
import Heading from '@/components/Heading.vue';
import Pagination from '@/components/Pagination.vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { dashboard } from '@/routes';
import type { BreadcrumbItem } from '@/types';

interface Kategori {
    id: number;
    nama_kategori: string;
    alias: string;
    judul: string;
    jenis: string;
    viewed: number;
    status: boolean;
    ads_count: number;
}

interface Paginated {
    data: Kategori[];
    from: number;
    to: number;
    total: number;
    links: { url: string | null; label: string; active: boolean }[];
}

const props = defineProps<{
    kategoris: Paginated;
    filters: { search?: string };
    appUrl: string;
}>();

defineOptions({
    layout: {
        breadcrumbs: [
            { title: 'Dashboard', href: dashboard() },
            { title: 'Kategori Landing', href: '/kategoris' },
        ] as BreadcrumbItem[],
    },
});
</script>

<template>
    <Head title="Kategori Landing" />

    <div class="flex flex-col space-y-6">
        <div class="flex items-center justify-between gap-4">
            <Heading title="Kategori Landing" description="Kategori untuk rotator iklan publik" />
            <Button as-child>
                <Link href="/kategoris/create"><Plus class="size-4" /> Tambah Kategori</Link>
            </Button>
        </div>

        <div class="w-full max-w-sm">
            <form method="GET" action="/kategoris">
                <div class="relative">
                    <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                    <Input name="search" :default-value="props.filters.search ?? ''" placeholder="Cari kategori…" class="pl-9" />
                </div>
            </form>
        </div>

        <div class="overflow-hidden rounded-xl border">
            <table class="w-full text-sm">
                <thead class="bg-muted/50 text-left text-xs uppercase text-muted-foreground">
                    <tr>
                        <th class="px-4 py-3 font-medium">Kategori</th>
                        <th class="px-4 py-3 font-medium">Judul</th>
                        <th class="px-4 py-3 font-medium">Jenis</th>
                        <th class="px-4 py-3 font-medium">URL Landing</th>
                        <th class="px-4 py-3 font-medium text-right">Campaign</th>
                        <th class="px-4 py-3 font-medium text-right">Dilihat</th>
                        <th class="px-4 py-3 font-medium text-center">Status</th>
                        <th class="px-4 py-3 font-medium text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    <tr v-for="k in props.kategoris.data" :key="k.id" class="hover:bg-muted/30">
                        <td class="px-4 py-3 font-medium">{{ k.nama_kategori }}</td>
                        <td class="px-4 py-3 font-medium">{{ k.judul }}</td>
                        <td class="px-4 py-3">
                            <Badge :variant="k.jenis === 'Redirect' ? 'outline' : 'secondary'">{{ k.jenis }}</Badge>
                        </td>
                        <td class="px-4 py-3">
                            <a :href="`${props.appUrl}/landing/${k.alias}`" target="_blank" class="inline-flex items-center gap-1 font-mono text-xs text-primary hover:underline">
                                {{ props.appUrl }}/landing/{{ k.alias }}
                                <ExternalLink class="size-3 shrink-0" />
                            </a>
                        </td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ k.ads_count.toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ k.viewed.toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 text-center">
                            <Badge :variant="k.status ? 'default' : 'outline'">{{ k.status ? 'Aktif' : 'Nonaktif' }}</Badge>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <Button as-child variant="ghost" size="sm">
                                <Link :href="`/kategoris/${k.id}/report`">Report</Link>
                            </Button>
                            <Button as-child variant="ghost" size="sm">
                                <Link :href="`/kategoris/${k.id}/edit`">Edit</Link>
                            </Button>
                        </td>
                    </tr>
                    <tr v-if="props.kategoris.data.length === 0">
                        <td colspan="8" class="px-4 py-8 text-center text-muted-foreground">Belum ada kategori.</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <Pagination :links="props.kategoris.links" :from="props.kategoris.from" :to="props.kategoris.to" :total="props.kategoris.total" />
    </div>
</template>
