import { DataTable } from '@/components/data-table';
import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Head, Link } from '@inertiajs/react';
import { Plus, Trash2 } from 'lucide-react';

import * as orderRoutes from '@/routes/order';
import type { Order } from '@/types/order';
import { useOrderIndex } from './hooks/use-order-index';
import { useOrderPrint } from './hooks/use-order-print';
import { getColumns } from './partials/columns';
import { PrinterSettings } from './partials/printer-settings';

export default function OrderIndex({ orders }: { orders: Order[] }) {
    const {
        isDeleteDialogOpen,
        isBulkDeleteDialogOpen,
        orderToDelete,
        rowsToDelete,
        rowSelection,
        setRowSelection,
        setRowsToDelete,
        setIsDeleteDialogOpen,
        setIsBulkDeleteDialogOpen,
        onDelete,
        confirmDelete,
        confirmBulkDelete,
    } = useOrderIndex();

    const {
        isConnected,
        name,
        paperSize,
        connectBluetooth,
        connectUsb,
        disconnect,
        setPaperSize,
        handlePrint
    } = useOrderPrint();

    const columns = getColumns({ onDelete, onPrint: handlePrint });

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

            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight text-foreground">Pesanan</h1>
                </div>
                <div className="flex items-center gap-2">
                    <PrinterSettings
                        isConnected={isConnected}
                        name={name}
                        paperSize={paperSize}
                        onConnectBluetooth={connectBluetooth}
                        onConnectUsb={connectUsb}
                        onDisconnect={disconnect}
                        onPaperSizeChange={setPaperSize}
                    />

                    <Link href={orderRoutes.create().url}>
                        <Button className="gap-2">
                            <Plus className="size-4" />
                            Tambah
                        </Button>
                    </Link>
                </div>
            </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={orders}
                        rowSelection={rowSelection}
                        onRowSelectionChange={setRowSelection}
                        bulkActions={[
                            {
                                label: 'Hapus Terpilih',
                                onClick: (rows) => {
                                    setRowsToDelete(rows);
                                    setIsBulkDeleteDialogOpen(true);
                                },
                                icon: Trash2,
                                variant: 'destructive'
                            },
                        ]}
                    />
                </CardContent>
            </Card>

            {/* Single Delete Confirmation */}
            <DeleteConfirmation
                isOpen={isDeleteDialogOpen}
                onOpenChange={setIsDeleteDialogOpen}
                title="Hapus pesanan?"
                description={
                    <>
                        Tindakan ini tidak dapat dibatalkan. Pesanan <strong>{orderToDelete?.invoice_number}</strong> akan dihapus secara permanen dan stok akan dikembalikan.
                    </>
                }
                onDelete={confirmDelete}
            />

            {/* Bulk Delete Confirmation */}
            <DeleteConfirmation
                isOpen={isBulkDeleteDialogOpen}
                onOpenChange={setIsBulkDeleteDialogOpen}
                title={`Hapus ${rowsToDelete.length} pesanan?`}
                description={
                    <>
                        Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> item yang terpilih akan dihapus secara permanen.
                    </>
                }
                onDelete={confirmBulkDelete}
            />
        </div>
    );
}

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