import { Head, Link } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import AppLayout from '@/layouts/app-layout';
import { PlusCircle, FileText } from 'lucide-react';

interface Payroll {
    id: number;
    employee_name: string;
    employee_nip: string;
    period: string;
    net_salary: number;
    status: 'pending' | 'paid';
}

interface PageProps {
    payrolls: Payroll[];
}

function formatRupiah(value: number): string {
    return new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR',
        minimumFractionDigits: 0,
    }).format(value);
}

function formatPeriod(period: string): string {
    const [year, month] = period.split('-');
    return new Date(Number(year), Number(month) - 1, 1)
        .toLocaleDateString('id-ID', { month: 'long', year: 'numeric' });
}

function StatusBadge({ status }: { status: 'pending' | 'paid' }) {
    return status === 'paid' ? (
        <Badge className="bg-emerald-100 text-emerald-700 hover:bg-emerald-100">Paid</Badge>
    ) : (
        <Badge className="bg-amber-100 text-amber-700 hover:bg-amber-100">Pending</Badge>
    );
}

export default function Index({ payrolls }: PageProps) {
    return (
        <AppLayout>
            <Head title="Daftar Payroll" />

            <div className="p-4 md:p-8 w-full space-y-4">
                <div className="space-y-1">
                    <h2 className="text-2xl font-bold tracking-tight">Manajemen Payroll</h2>
                    <p className="text-muted-foreground">Daftar seluruh payroll yang telah di-generate.</p>
                </div>

                <Card>
                    <CardHeader className="flex flex-row items-center justify-between pb-4">
                        <CardTitle>Daftar Slip Gaji</CardTitle>
                        <Button asChild>
                            <Link href="/admin/payrolls/create" className="gap-2">
                                <PlusCircle className="h-4 w-4" />
                                Generate Payroll
                            </Link>
                        </Button>
                    </CardHeader>

                    <CardContent className="p-0">
                        {payrolls.length === 0 ? (
                            <div className="flex flex-col items-center justify-center py-16 text-center">
                                <FileText className="mb-3 h-10 w-10 text-muted-foreground/50" />
                                <p className="text-sm font-medium text-muted-foreground">
                                    Belum ada data payroll.
                                </p>
                                <Button asChild variant="outline" className="mt-4">
                                    <Link href="/admin/payrolls/create">Generate Pertama</Link>
                                </Button>
                            </div>
                        ) : (
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead className="w-12">#</TableHead>
                                        <TableHead>Karyawan</TableHead>
                                        <TableHead>Periode</TableHead>
                                        <TableHead className="text-right">Gaji Bersih</TableHead>
                                        <TableHead className="text-center">Status</TableHead>
                                        <TableHead className="text-right">Aksi</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {payrolls.map((payroll, index) => (
                                        <TableRow key={payroll.id}>
                                            <TableCell className="text-muted-foreground">
                                                {index + 1}
                                            </TableCell>
                                            <TableCell>
                                                <div className="font-medium">{payroll.employee_name}</div>
                                                <div className="text-xs text-muted-foreground">
                                                    NIP: {payroll.employee_nip}
                                                </div>
                                            </TableCell>
                                            <TableCell>{formatPeriod(payroll.period)}</TableCell>
                                            <TableCell className="text-right font-medium">
                                                {formatRupiah(payroll.net_salary)}
                                            </TableCell>
                                            <TableCell className="text-center">
                                                <StatusBadge status={payroll.status} />
                                            </TableCell>
                                            <TableCell className="text-right">
                                                <Button asChild variant="ghost" size="sm">
                                                    <Link href={`/admin/payrolls/${payroll.id}`}>
                                                        Lihat Slip
                                                    </Link>
                                                </Button>
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        )}
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}
