<script setup lang="ts">
import { Head, Link, usePage } from '@inertiajs/vue3';
import { 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 Billing {
    id: number;
    no_invoice: string;
    jumlah_credit: number;
    rate: number;
    total: number;
    status: string;
    payment_method: string;
    duitku_payment_url?: string | null;
    user?: { name: string } | null;
    bank?: { kode: string; keterangan: string } | null;
    created_at: string;
}

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

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

const page = usePage();
const isAdmin = page.props.auth.user?.is_admin ?? false;

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

const statusVariant: Record<string, 'default' | 'secondary' | 'outline'> = {
    Pending: 'outline',
    Lunas: 'default',
    Batal: 'secondary',
};

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

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

    <div class="flex flex-col space-y-6">
        <div class="flex items-center justify-between gap-4">
            <Heading title="Billing & Deposit" description="Invoice deposit credit" />
            <Button as-child>
                <Link href="/billings/create"><Plus class="size-4" /> Topup</Link>
            </Button>
        </div>

        <div class="w-full max-w-sm">
            <form method="GET" action="/billings">
                <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 nomor invoice…" 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">No. Invoice</th>
                        <th class="px-4 py-3 font-medium">Tanggal</th>
                        <th class="px-4 py-3 font-medium">Pengguna</th>
                        <th class="px-4 py-3 font-medium text-right">Kredit</th>
                        <th class="px-4 py-3 font-medium text-right">Total</th>
                        <th class="px-4 py-3 font-medium">Metode</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="b in props.billings.data" :key="b.id" class="hover:bg-muted/30">
                        <td class="px-4 py-3 font-mono font-medium">{{ b.no_invoice }}</td>
                        <td class="px-4 py-3 font-mono font-medium">{{ new Date(b.created_at).toLocaleString('id-ID', {
                            timeZone: 'Asia/Jakarta'
                        }) }}</td>
                        <td class="px-4 py-3 text-muted-foreground">{{ b.user?.name ?? '—' }}</td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ b.jumlah_credit.toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 text-right tabular-nums">{{ rupiah(b.total) }}</td>
                        <td class="px-4 py-3 text-muted-foreground">
                            <Badge :variant="b.payment_method === 'duitku' ? 'default' : 'outline'">
                                {{ b.payment_method === 'duitku' ? 'Duitku' : (b.bank?.kode ?? 'Manual') }}
                            </Badge>
                        </td>
                        <td class="px-4 py-3 text-center">
                            <Badge :variant="statusVariant[b.status] ?? 'outline'">{{ b.status }}</Badge>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <div class="flex justify-end gap-1">
                                <!-- Bayar: member dengan invoice Duitku pending -->
                                <Button
                                    v-if="b.status === 'Pending' && b.payment_method === 'duitku' && b.duitku_payment_url"
                                    as-child
                                    size="sm"
                                >
                                    <a :href="b.duitku_payment_url">Bayar</a>
                                </Button>
                                <!-- Konfirmasi manual: admin saja -->
                                <Button v-if="isAdmin && b.status === 'Pending' && b.payment_method !== 'duitku'" as-child size="sm">
                                    <Link :href="`/billings/${b.id}/confirm`">Konfirmasi</Link>
                                </Button>
                                <Button v-if="isAdmin && b.status === 'Pending'" as-child variant="ghost" size="sm">
                                    <Link :href="`/billings/${b.id}/edit`">Edit</Link>
                                </Button>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="props.billings.data.length === 0">
                        <td colspan="7" class="px-4 py-8 text-center text-muted-foreground">Belum ada invoice.</td>
                    </tr>
                </tbody>
            </table>
        </div>

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