import { Head } from '@inertiajs/react';
import { Trash2, Plus } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import { DeleteConfirmation } from '@/components/modal/delete-confirmation';
import { ImagePreviewDialog } from '@/components/modal/image-preview';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import type { Expense } from '@/types';
import type { PaginatedData } from '@/types/pagination';

import { useExpenseIndex } from './hooks/use-expense-index';
import { getColumns } from './partials/columns';
import { ExpenseFormModal } from './partials/expense-form-modal';
import { usePermission } from '@/hooks/use-permission';

export default function ExpenseIndex({ expenses }: { expenses: PaginatedData<Expense> }) {
    const { hasPermission } = usePermission();
    const {
        selectedProof,
        isFormOpen,
        selectedExpense,
        isDeleteDialogOpen,
        isBulkDeleteDialogOpen,
        expenseToDelete,
        rowsToDelete,
        rowSelection,
        setRowSelection,
        setRowsToDelete,
        setIsDeleteDialogOpen,
        setIsBulkDeleteDialogOpen,
        onAdd,
        onEdit,
        onDelete,
        confirmDelete,
        confirmBulkDelete,
        closeForm,
        onPreviewImage,
        closeImagePreview
    } = useExpenseIndex();

    const columns = getColumns({ onEdit, onDelete, onPreviewImage }).filter(
        (col) => col.id !== 'actions' || hasPermission('Edit:Expense') || hasPermission('Delete:Expense')
    );

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

            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">Pengeluaran</h1>
                </div>
                {hasPermission('Create:Expense') && (
                    <Button onClick={onAdd} className="gap-2">
                        <Plus className="size-4" />
                        Tambah
                    </Button>
                )}
            </div>

            <ExpenseFormModal
                isOpen={isFormOpen}
                onClose={closeForm}
                expense={selectedExpense}
            />

            <Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm p-5">
                <CardContent className="p-0">
                    <DataTable
                        columns={columns}
                        data={expenses.data}
                        meta={expenses}
                        showSelection={hasPermission('DeleteAny:Expense')}
                        rowSelection={rowSelection}
                        onRowSelectionChange={setRowSelection}
                        bulkActions={
                            hasPermission('DeleteAny:Expense')
                                ? [
                                      {
                                          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 pengeluaran?"
                description={
                    <>
                        Tindakan ini tidak dapat dibatalkan. Pengeluaran <strong>{expenseToDelete?.name}</strong> akan dihapus secara permanen.
                    </>
                }
                onDelete={confirmDelete}
            />

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

            <ImagePreviewDialog
                imageUrl={selectedProof}
                onClose={closeImagePreview}
            />
        </div>
    );
}

ExpenseIndex.layout = {
    breadcrumbs: [
        {
            title: 'Keuangan',
        },
    ],
};
