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

interface History {
    id: number;
    invoice: string | null;
    tanggal: string;
    keterangan: string | null;
    credit: number;
    jenis: string;
    user?: { name: string } | null;
}

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

const props = defineProps<{
    histories: Paginated;
    credit: number;
}>();

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

<template>
    <Head title="Riwayat Kredit" />

    <div class="flex flex-col space-y-6">
        <Heading title="Riwayat Kredit" description="Mutasi saldo credit In/Out" />

        <Card class="max-w-xs">
            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle class="text-sm font-medium text-muted-foreground">Saldo Kredit</CardTitle>
                <Coins class="size-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
                <div class="text-2xl font-bold tabular-nums">{{ props.credit.toLocaleString('id-ID') }}</div>
                <p class="text-xs text-muted-foreground">1 credit = 1 klik valid</p>
            </CardContent>
        </Card>

        <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">Tanggal</th>
                        <th class="px-4 py-3 font-medium">Referensi</th>
                        <th class="px-4 py-3 font-medium">Keterangan</th>
                        <th class="px-4 py-3 font-medium">Pengguna</th>
                        <th class="px-4 py-3 font-medium text-right">Jenis</th>
                        <th class="px-4 py-3 font-medium text-right">Jumlah</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    <tr v-for="h in props.histories.data" :key="h.id" class="hover:bg-muted/30">
                        <td class="px-4 py-3 whitespace-nowrap">{{ new Date(h.tanggal).toLocaleString('id-ID') }}</td>
                        <td class="px-4 py-3 font-mono text-xs">{{ h.invoice ?? '—' }}</td>
                        <td class="px-4 py-3 text-muted-foreground">{{ h.keterangan ?? '—' }}</td>
                        <td class="px-4 py-3 text-muted-foreground">{{ h.user?.name ?? '—' }}</td>
                        <td class="px-4 py-3 text-right">
                            <Badge :variant="h.jenis === 'In' ? 'default' : 'destructive'">{{ h.jenis }}</Badge>
                        </td>
                        <td class="px-4 py-3 text-right tabular-nums" :class="h.jenis === 'In' ? 'text-green-600' : 'text-red-600'">
                            {{ h.jenis === 'In' ? '+' : '-' }}{{ h.credit.toLocaleString('id-ID') }}
                        </td>
                    </tr>
                    <tr v-if="props.histories.data.length === 0">
                        <td colspan="6" class="px-4 py-8 text-center text-muted-foreground">Belum ada mutasi kredit.</td>
                    </tr>
                </tbody>
            </table>
        </div>

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