import { Head, Link } from '@inertiajs/react';
import type { Purchase } from '@/types';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Trash2 } from 'lucide-react';
import { format } from 'date-fns';
import { id } from 'date-fns/locale';
import { DataTable } from '@/components/data-table';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogMedia,
    AlertDialogTitle,
} from "@/components/ui/alert-dialog"

import purchaseRoutes from '@/routes/purchase';
import { usePurchaseIndex } from './hooks/use-purchase-index';
import { getColumns } from './partials/columns';

export default function PurchaseIndex({ purchases }: { purchases: Purchase[] }) {
    const {
        isDeleteDialogOpen,
        isBulkDeleteDialogOpen,
        purchaseToDelete,
        rowsToDelete,
        rowSelection,
        setRowSelection,
        setRowsToDelete,
        setIsDeleteDialogOpen,
        setIsBulkDeleteDialogOpen,
        onDelete,
        confirmDelete,
        confirmBulkDelete,
    } = usePurchaseIndex();

    const columns = getColumns({ onDelete });

    return (
        <div className="flex flex-col gap-6 p-6">
            <Head title="Belanja" />

            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">Belanja</h1>
                </div>
                <Link href={purchaseRoutes.create().url}>
                    <Button>
                        Tambah
                    </Button>
                </Link>
            </div>

            <Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm p-5">
                <CardContent className="p-0">
                    <DataTable
                        columns={columns}
                        data={purchases}
                        rowSelection={rowSelection}
                        onRowSelectionChange={setRowSelection}
                        bulkActions={[
                            {
                                label: 'Hapus Terpilih',
                                onClick: (rows) => {
                                    setRowsToDelete(rows);
                                    setIsBulkDeleteDialogOpen(true);
                                },
                                icon: Trash2,
                                variant: 'destructive'
                            },
                        ]}
                    />
                </CardContent>
            </Card>

            {/* Single Delete Confirmation */}
            <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
                <AlertDialogContent size="default">
                    <AlertDialogHeader>
                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
                            <Trash2 className="size-5" />
                        </AlertDialogMedia>
                        <AlertDialogTitle>Hapus data belanja?</AlertDialogTitle>
                        <AlertDialogDescription>
                            Tindakan ini tidak dapat dibatalkan. Data belanja tanggal <strong>{purchaseToDelete && format(new Date(purchaseToDelete.purchase_date), 'dd MMMM yyyy', { locale: id })}</strong> akan dihapus secara permanen.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel variant="outline">Batal</AlertDialogCancel>
                        <AlertDialogAction onClick={confirmDelete} variant="destructive">Hapus</AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

            {/* Bulk Delete Confirmation */}
            <AlertDialog open={isBulkDeleteDialogOpen} onOpenChange={setIsBulkDeleteDialogOpen}>
                <AlertDialogContent size="default">
                    <AlertDialogHeader>
                        <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
                            <Trash2 className="size-5" />
                        </AlertDialogMedia>
                        <AlertDialogTitle>Hapus {rowsToDelete.length} data belanja?</AlertDialogTitle>
                        <AlertDialogDescription>
                            Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel variant="outline">Batal</AlertDialogCancel>
                        <AlertDialogAction
                            onClick={confirmBulkDelete}
                            variant="destructive"
                        >
                            Hapus
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </div>
    );
}

PurchaseIndex.layout = {
    breadcrumbs: [
        {
            title: 'Kelola',
        },
    ],
};
