<script setup lang="ts">
import { Head, Link, usePage } from '@inertiajs/vue3';
import { Download, FileText, 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 Campaign {
    id: number;
    judul: string;
    url: string;
    budget_harian: number | null;
    klik_hari_ini: number;
    rollover_klik: number;
    klik: number;
    status: number;
    is_paused: boolean;
    kategoris?: { id: number; nama_kategori: string }[];
    user?: { name: string } | null;
    ad_type: string;
    ad_platform?: { name: string } | null;

    created_at: string;
}

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

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

defineOptions({
    layout: {
        breadcrumbs: [
            { title: 'Dashboard', href: dashboard() },
            { title: 'Campaign', href: '/campaigns' },
        ] as BreadcrumbItem[],
    },
});

const statusLabel: Record<number, { label: string; variant: 'default' | 'secondary' | 'outline' | 'destructive' }> = {
    0: { label: 'Menunggu', variant: 'outline' },
    1: { label: 'Aktif', variant: 'default' },
    2: { label: 'Batal', variant: 'destructive' },
    3: { label: 'Selesai', variant: 'secondary' },
    4: { label: 'Draft', variant: 'outline' },
};

const page = usePage();
const isAdmin = page.props.auth.user?.is_admin ?? false;
</script>

<template>
    <Head title="Campaign" />

    <div class="flex flex-col space-y-6">
        <div class="flex items-center justify-between gap-4">
            <Heading title="Campaign Iklan" description="Kelola campaign iklan Anda" />
            <div class="flex gap-2">
                <Button as-child variant="outline">
                    <a href="/campaigns-export">
                        <Download class="size-4" />
                        Ekspor
                    </a>
                </Button>
                <Button as-child variant="outline">
                    <Link href="/campaigns/drafts">
                        <FileText class="size-4" />
                        Draft
                    </Link>
                </Button>
                <Button as-child>
                    <Link href="/campaigns/create">
                        <Plus class="size-4" />
                        Buat Campaign
                    </Link>
                </Button>
            </div>
        </div>

        <div class="w-full max-w-sm">
            <form method="GET" action="/campaigns">
                <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 judul campaign…" 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 text-right">ID</th>
                        <th class="px-4 py-3 font-medium">Judul</th>
                        <th v-if="isAdmin" class="px-4 py-3 font-medium">Kategori</th>
                        <th class="px-4 py-3 font-medium">Platform</th>
                        <th class="px-4 py-3 font-medium text-right">Budget Harian</th>
                        <th class="px-4 py-3 font-medium text-right">Klik Hari Ini</th>
                        <th class="px-4 py-3 font-medium text-right">Rollover</th>
                        <th class="px-4 py-3 font-medium text-right">Klik</th>
                        <th class="px-4 py-3 font-medium">Dibuat</th>
                        <th class="px-4 py-3 font-medium text-center">Diupdate</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="c in props.campaigns.data" :key="c.id" class="hover:bg-muted/30">
                        <td class="px-4 py-3 text-right tabular-nums text-muted-foreground">{{ c.id }}</td>
                        <td class="px-4 py-3 font-medium">
                            {{ c.judul }}
                            <div class="text-xs text-muted-foreground">{{ c.user?.name }}</div>
                        </td>
                        <td v-if="isAdmin" class="px-4 py-3 text-muted-foreground">{{ c.kategoris?.map(k => k.nama_kategori).join(', ') || '—' }}</td>
                        <td class="px-4 py-3 text-muted-foreground">{{ c.ad_type === 'link_website' ? '—' : (c.ad_platform?.name ?? '—') }}</td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ (c.budget_harian ?? 0).toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ c.klik_hari_ini.toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ c.rollover_klik.toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ c.klik.toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 text-muted-foreground">
                            <div class="tabular-nums">{{ new Date(c.created_at).toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' }) }}</div>
                            <div class="text-xs tabular-nums">{{ new Date(c.created_at).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</div>
                        </td>
                        <td class="px-4 py-3 text-muted-foreground">
                            <div class="tabular-nums">{{ new Date(c.updated_at).toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' }) }}</div>
                            <div class="text-xs tabular-nums">{{ new Date(c.updated_at).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }) }}</div>
                        </td>
                        <td class="px-4 py-3 text-center">
                            <Badge v-if="c.is_paused && c.status === 1" variant="secondary">Dijeda</Badge>
                            <Badge v-else :variant="statusLabel[c.status]?.variant ?? 'outline'">
                                {{ statusLabel[c.status]?.label ?? '—' }}
                            </Badge>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <div class="flex flex-wrap justify-end gap-1">
                                <Button as-child variant="ghost" size="sm">
                                    <Link :href="`/campaigns/${c.id}`">Detail</Link>
                                </Button>
                                <Button v-if="isAdmin && c.status === 0" as-child size="sm">
                                    <Link :href="`/campaigns/${c.id}/approve`">Approve</Link>
                                </Button>
                                <Button v-if="c.status === 1 && !c.is_paused" as-child variant="outline" size="sm">
                                    <Link :href="`/campaigns/${c.id}/stop`">Stop</Link>
                                </Button>
                                <Button v-if="c.status === 1 && c.is_paused" as-child size="sm">
                                    <Link :href="`/campaigns/${c.id}/start`">Start</Link>
                                </Button>
                                <Button v-if="c.status === 0 || (c.status === 1 && c.is_paused)" as-child variant="ghost" size="sm">
                                    <Link :href="`/campaigns/${c.id}/edit`">Edit</Link>
                                </Button>
                                <Button v-if="c.status === 0 || c.status === 1" as-child variant="outline" size="sm">
                                    <Link :href="`/campaigns/${c.id}/draft`">Jadikan Draft</Link>
                                </Button>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="props.campaigns.data.length === 0">
                        <td :colspan="isAdmin ? 11 : 10" class="px-4 py-8 text-center text-muted-foreground">Belum ada campaign.</td>
                    </tr>
                </tbody>
            </table>
        </div>

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