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

interface AdRow {
    no: number;
    id: number;
    judul: string;
    url: string;
    user: string | null;
    status: string;
    is_paused: boolean;
    klik_total: number;
    klik_hari_ini: number;
    klik_7_hari: number;
    muncul_total: number;
    muncul_hari_ini: number;
}

const props = defineProps<{
    kategori: {
        id: number;
        nama_kategori: string;
        judul: string | null;
        alias: string;
        jenis: string;
        viewed: number;
    };
    ads: AdRow[];
    totals: {
        klik_hari_ini: number;
        klik_7_hari: number;
        klik_total: number;
    };
}>();

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

<template>
    <Head :title="`Report — ${props.kategori.nama_kategori}`" />

    <div class="flex flex-col space-y-6">
        <div>
            <Button as-child variant="ghost" size="sm" class="mb-2">
                <Link href="/kategoris"><ArrowLeft class="size-4" /> Kembali</Link>
            </Button>
            <Heading
                :title="`Report: ${props.kategori.nama_kategori}`"
                :description="`Statistik klik per campaign pada kategori ini`"
            />
            <div class="mt-2 flex items-center gap-2">
                <Badge :variant="props.kategori.jenis === 'Redirect' ? 'outline' : 'secondary'">
                    {{ props.kategori.jenis }}
                </Badge>
                <span class="text-sm text-muted-foreground">
                    Dilihat {{ props.kategori.viewed.toLocaleString('id-ID') }}x
                </span>
            </div>
        </div>

        <!-- Ringkasan -->
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <div class="rounded-xl border p-4">
                <div class="text-xs text-muted-foreground uppercase">Klik Hari Ini</div>
                <div class="mt-1 text-2xl font-bold tabular-nums">
                    {{ props.totals.klik_hari_ini.toLocaleString('id-ID') }}
                </div>
            </div>
            <div class="rounded-xl border p-4">
                <div class="text-xs text-muted-foreground uppercase">Klik 7 Hari</div>
                <div class="mt-1 text-2xl font-bold tabular-nums">
                    {{ props.totals.klik_7_hari.toLocaleString('id-ID') }}
                </div>
            </div>
            <div class="rounded-xl border p-4">
                <div class="text-xs text-muted-foreground uppercase">Total Klik</div>
                <div class="mt-1 text-2xl font-bold tabular-nums">
                    {{ props.totals.klik_total.toLocaleString('id-ID') }}
                </div>
            </div>
        </div>

        <!-- Tabel per campaign -->
        <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">No</th>
                        <th class="px-4 py-3 font-medium">Iklan</th>
                        <th class="px-4 py-3 font-medium">URL</th>
                        <th class="px-4 py-3 font-medium">Pemilik</th>
                        <th class="px-4 py-3 font-medium text-center">Status</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">Klik 7 Hari</th>
                        <th class="px-4 py-3 font-medium text-right">Total Klik</th>
                        <th class="px-4 py-3 font-medium text-right">Tayang Hari Ini</th>
                        <th class="px-4 py-3 font-medium text-right">Total Tayang</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    <tr v-for="ad in props.ads" :key="ad.id" class="hover:bg-muted/30">
                        <td class="px-4 py-3 tabular-nums">{{ ad.no }}</td>
                        <td class="px-4 py-3 font-medium">{{ ad.judul }}</td>
                        <td class="px-4 py-3">
                            <a :href="ad.url" target="_blank" class="inline-flex max-w-56 items-center gap-1 truncate font-mono text-xs text-primary hover:underline">
                                <span class="truncate">{{ ad.url }}</span>
                                <ExternalLink class="size-3 shrink-0" />
                            </a>
                        </td>
                        <td class="px-4 py-3 text-muted-foreground">{{ ad.user ?? '—' }}</td>
                        <td class="px-4 py-3 text-center">
                            <Badge v-if="ad.is_paused" variant="secondary">Dijeda</Badge>
                            <Badge v-else variant="outline">{{ ad.status }}</Badge>
                        </td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ ad.klik_hari_ini.toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ ad.klik_7_hari.toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 text-right font-semibold tabular-nums">{{ ad.klik_total.toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ ad.muncul_hari_ini.toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ ad.muncul_total.toLocaleString('id-ID') }}</td>
                    </tr>
                    <tr v-if="props.ads.length === 0">
                        <td colspan="10" class="px-4 py-8 text-center text-muted-foreground">
                            Belum ada campaign pada kategori ini.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
