<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { Activity, Coins, Megaphone, TrendingUp } from '@lucide/vue';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { dashboard } from '@/routes';
import type { BreadcrumbItem } from '@/types';

interface Campaign {
    id: number;
    judul: string;
    klik: number;
    credit: number;
    status: number;
    kategori?: { nama_kategori: string } | null;
    created_at: string;
}

interface Billing {
    id: number;
    no_invoice: string;
    jumlah_credit: number;
    total: number;
    status: string;
    user?: { name: string } | null;
    created_at: string;
}

interface Performance {
    judul: string;
    klik: number;
}

interface Stats {
    total_campaigns: number;
    active_campaigns: number;
    total_klik: number;
    credit_balance: number;
}

const props = defineProps<{
    stats: Stats;
    recentCampaigns: Campaign[];
    recentBillings: Billing[];
    performance: Performance[];
    isAdmin: boolean;
}>();

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

const statusLabel: Record<number, string> = {
    0: 'Menunggu', 1: 'Aktif', 2: 'Batal', 3: 'Selesai', 4: 'Draft',
};

const rupiah = (n: number) => 'Rp ' + n.toLocaleString('id-ID');

// Skala batang horizontal — klik maksimum menentukan lebar relatif.
const maxKlik = Math.max(1, ...props.performance.map((p) => p.klik));

// Konfigurasi stat tile: warna icon chip ala Meta.
const tiles = [
    { label: 'Total Campaign', value: props.stats.total_campaigns, icon: Megaphone, color: '#1877F2' },
    { label: 'Campaign Aktif', value: props.stats.active_campaigns, icon: Activity, color: '#16A34A' },
    { label: 'Total Klik', value: props.stats.total_klik.toLocaleString('id-ID'), icon: TrendingUp, color: '#9333EA' },
    { label: 'Saldo Kredit', value: props.stats.credit_balance.toLocaleString('id-ID'), icon: Coins, color: '#EA580C' },
];
</script>

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

    <div class="flex flex-col space-y-6">
        <!-- Header dengan accent brand -->
        <div class="flex items-center gap-3">
            <div class="h-8 w-1.5 rounded-full" style="background: #1877F2" />
            <h1 class="text-xl font-semibold tracking-tight">Dashboard</h1>
        </div>

        <!-- Stat tiles -->
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <Card v-for="t in tiles" :key="t.label" class="overflow-hidden">
                <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle class="text-sm font-medium text-muted-foreground">{{ t.label }}</CardTitle>
                    <div
                        class="flex size-8 items-center justify-center rounded-lg"
                        :style="{ backgroundColor: t.color + '15', color: t.color }"
                    >
                        <component :is="t.icon" class="size-4" />
                    </div>
                </CardHeader>
                <CardContent>
                    <div class="text-2xl font-bold tabular-nums">{{ t.value }}</div>
                </CardContent>
            </Card>
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
            <!-- Grafik performa campaign (FR-DASH-02) -->
            <Card class="lg:col-span-2">
                <CardHeader class="flex flex-row items-center gap-2">
                    <div class="h-5 w-1 rounded-full" style="background: #1877F2" />
                    <CardTitle class="text-base">Performa Campaign — Judul vs Jumlah Klik</CardTitle>
                </CardHeader>
                <CardContent>
                    <div v-if="props.performance.length > 0" class="space-y-2.5">
                        <div v-for="p in props.performance" :key="p.judul" class="flex items-center gap-3">
                            <div class="w-40 shrink-0 truncate text-sm text-muted-foreground" :title="p.judul">{{ p.judul }}</div>
                            <div class="relative h-7 flex-1 overflow-hidden rounded-md bg-muted/40">
                                <div
                                    class="absolute inset-y-0 left-0 rounded-md transition-all"
                                    :style="{ width: `${(p.klik / maxKlik) * 100}%`, background: 'linear-gradient(90deg, #1877F2, #0080FF)' }"
                                />
                            </div>
                            <div class="w-12 shrink-0 text-right text-sm font-semibold tabular-nums">{{ p.klik }}</div>
                        </div>
                    </div>
                    <p v-else class="py-8 text-center text-sm text-muted-foreground">Belum ada data performa.</p>
                </CardContent>
            </Card>

            <!-- Campaign terbaru (FR-DASH-01) -->
            <Card>
                <CardHeader class="flex flex-row items-center gap-2">
                    <div class="h-5 w-1 rounded-full" style="background: #1877F2" />
                    <CardTitle class="text-base">Campaign Terbaru</CardTitle>
                </CardHeader>
                <CardContent class="space-y-3">
                    <div v-for="c in props.recentCampaigns" :key="c.id" class="flex items-center justify-between gap-2 text-sm">
                        <div class="min-w-0">
                            <div class="truncate font-medium">{{ c.judul }}</div>
                            <div class="text-xs text-muted-foreground">{{ c.kategori?.nama_kategori ?? '—' }}</div>
                        </div>
                        <Badge
                            :variant="c.status === 1 ? 'default' : 'outline'"
                            :class="c.status === 1 ? 'text-white' : ''"
                            :style="c.status === 1 ? 'background: #1877F2' : ''"
                        >{{ statusLabel[c.status] }}</Badge>
                    </div>
                    <p v-if="props.recentCampaigns.length === 0" class="text-sm text-muted-foreground">Belum ada campaign.</p>
                </CardContent>
            </Card>

            <!-- Billing terbaru (FR-DASH-01) -->
            <Card>
                <CardHeader class="flex flex-row items-center gap-2">
                    <div class="h-5 w-1 rounded-full" style="background: #1877F2" />
                    <CardTitle class="text-base">Billing Terbaru</CardTitle>
                </CardHeader>
                <CardContent class="space-y-3">
                    <div v-for="b in props.recentBillings" :key="b.id" class="flex items-center justify-between gap-2 text-sm">
                        <div class="min-w-0">
                            <div class="font-mono text-xs font-medium">{{ b.no_invoice }}</div>
                            <div v-if="props.isAdmin" class="text-xs text-muted-foreground">{{ b.user?.name ?? '—' }}</div>
                        </div>
                        <div class="text-right">
                            <div class="text-xs tabular-nums">{{ rupiah(b.total) }}</div>
                            <Badge
                                :variant="b.status === 'Lunas' ? 'default' : 'outline'"
                                :class="b.status === 'Lunas' ? 'mt-0.5 text-white' : 'mt-0.5'"
                                :style="b.status === 'Lunas' ? 'background: #1877F2' : ''"
                            >{{ b.status }}</Badge>
                        </div>
                    </div>
                    <p v-if="props.recentBillings.length === 0" class="text-sm text-muted-foreground">Belum ada billing.</p>
                </CardContent>
            </Card>
        </div>
    </div>
</template>
