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

import userRoutes from '@/routes/user';
import { useUserIndex } from './hooks/use-user-index';
import { getColumns } from './partials/columns';

export default function UserIndex({ users, defaultPassword }: { users: User[], defaultPassword: string }) {
    const {
        isDeleteDialogOpen,
        isBulkDeleteDialogOpen,
        userToDelete,
        isResetPasswordOpen,
        userToReset,
        rowsToDelete,
        rowSelection,
        setRowSelection,
        setRowsToDelete,
        setIsDeleteDialogOpen,
        setIsBulkDeleteDialogOpen,
        setIsResetPasswordOpen,
        onResetPassword,
        confirmResetPassword,
        onDelete,
        confirmDelete,
        confirmBulkDelete,
    } = useUserIndex();

    const columns = getColumns({ onResetPassword, onDelete });

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

            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">Pegawai</h1>
                </div>
                <Link href={userRoutes.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={users}
                        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 pegawai?</AlertDialogTitle>
                        <AlertDialogDescription>
                            Tindakan ini tidak dapat dibatalkan. Pegawai <strong>{userToDelete?.name}</strong> akan dihapus secara permanen.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel variant="outline">Batal</AlertDialogCancel>
                        <AlertDialogAction onClick={confirmDelete} variant="destructive">Hapus</AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

            {/* Reset Password Confirmation */}
            <AlertDialog open={isResetPasswordOpen} onOpenChange={setIsResetPasswordOpen}>
                <AlertDialogContent size="default">
                    <AlertDialogHeader>
                        <AlertDialogMedia className="bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:text-blue-500">
                            <KeyRound className="size-5" />
                        </AlertDialogMedia>
                        <AlertDialogTitle>Reset password?</AlertDialogTitle>
                        <AlertDialogDescription>
                            Tindakan ini akan mereset password <strong>{userToReset?.name}</strong> menjadi <strong>{defaultPassword}</strong>. Pengguna dapat mengubahnya kembali nanti.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel variant="outline">Batal</AlertDialogCancel>
                        <AlertDialogAction onClick={confirmResetPassword} className="bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-600">Reset</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} pegawai?</AlertDialogTitle>
                        <AlertDialogDescription>
                            Tindakan ini tidak dapat dibatalkan. <strong>{rowsToDelete.length}</strong> pegawai 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>
    );
}

UserIndex.layout = {
    breadcrumbs: [
        {
            title: 'Master',
        },
    ],
};
