import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { useAuthBreadcrumb } from '@/hooks/use-auth-breadcrumb';
import AppLayout from '@/layouts/app-layout';
import { Head, useForm } from '@inertiajs/react';
import { UserCircle } from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';

type PermissionField = 'can_view' | 'can_create' | 'can_update' | 'can_delete';

interface User {
    id: number;
    name: string;
}

interface SubKegiatan {
    id: number;
    nama: string;
}

interface Permission {
    user_id: number;
    sub_kegiatan_id: number;
    can_view: boolean;
    can_create: boolean;
    can_update: boolean;
    can_delete: boolean;
}

interface HakAksesProps {
    users: User[];
    tahunList: { id: number; nama: string; jenis: string }[];
    subKegiatanListByTahun: Record<number, SubKegiatan[]>;
    permissions: Permission[];
}

export default function HakAksesIndex({
    users,
    tahunList,
    subKegiatanListByTahun,
    permissions,
}: HakAksesProps) {
    const breadcrumbs = useAuthBreadcrumb();
    const [selectedTahun, setSelectedTahun] = useState<number>(
        tahunList.length ? tahunList[0].id : 0,
    );
    const [selectedUser, setSelectedUser] = useState<number | null>(null);

    const { data, setData, post, processing } = useForm<{
        permissions: Permission[];
        to_delete: { user_id: number; sub_kegiatan_id: number }[];
    }>({
        permissions: permissions ?? [],
        to_delete: [],
    });

    const isSaveDisabled =
        processing ||
        (data.permissions.length === 0 && data.to_delete.length === 0);

    const handleCheckbox = (
        userId: number,
        subId: number,
        field: PermissionField,
        value: boolean,
    ) => {
        setData((prevData) => {
            const updatedPermissions = [...(prevData.permissions ?? [])];
            let updatedToDelete = [...(prevData.to_delete ?? [])];

            const idx = updatedPermissions.findIndex(
                (p) => p.user_id === userId && p.sub_kegiatan_id === subId,
            );

            if (idx >= 0) {
                updatedPermissions[idx] = {
                    ...updatedPermissions[idx],
                    [field]: value,
                };
            } else {
                updatedPermissions.push({
                    user_id: userId,
                    sub_kegiatan_id: subId,
                    can_view: field === 'can_view' ? value : false,
                    can_create: field === 'can_create' ? value : false,
                    can_update: field === 'can_update' ? value : false,
                    can_delete: field === 'can_delete' ? value : false,
                });
            }

            const currentPerm = updatedPermissions.find(
                (p) => p.user_id === userId && p.sub_kegiatan_id === subId,
            );
            const isAllFalse =
                !currentPerm?.can_create &&
                !currentPerm?.can_update &&
                !currentPerm?.can_delete;

            if (isAllFalse) {
                const exists = updatedToDelete.some(
                    (d) => d.user_id === userId && d.sub_kegiatan_id === subId,
                );
                if (!exists) {
                    updatedToDelete.push({
                        user_id: userId,
                        sub_kegiatan_id: subId,
                    });
                }
            } else {
                updatedToDelete = updatedToDelete.filter(
                    (d) =>
                        !(d.user_id === userId && d.sub_kegiatan_id === subId),
                );
            }

            return {
                ...prevData,
                permissions: updatedPermissions,
                to_delete: updatedToDelete,
            };
        });
    };

    const getPermission = (subId: number, userId: number) => {
        return data.permissions.find(
            (p) => p.sub_kegiatan_id === subId && p.user_id === userId,
        );
    };

    const submitUpdate = () => {
        post(route('updateMultiple'), {
            preserveScroll: true,
            onSuccess: () => toast.success('Hak akses berhasil disimpan'),
            onError: () => toast.error('Gagal menyimpan hak akses'),
        });
    };

    const checkAll = () => {
        if (!selectedUser) return;
        const updated: Permission[] = [];

        (subKegiatanListByTahun[selectedTahun] || []).forEach((sub) => {
            updated.push({
                user_id: selectedUser,
                sub_kegiatan_id: sub.id,
                can_view: true,
                can_create: true,
                can_update: true,
                can_delete: true,
            });
        });

        setData((prev) => ({
            ...prev,
            permissions: [
                ...prev.permissions.filter((p) => p.user_id !== selectedUser),
                ...updated,
            ],
            to_delete: [],
        }));
    };

    const uncheckAll = () => {
        if (!selectedUser) return;
        setData((prev) => ({
            ...prev,
            permissions: prev.permissions.filter(
                (p) => p.user_id !== selectedUser,
            ),
            to_delete: (subKegiatanListByTahun[selectedTahun] || []).map(
                (sub) => ({
                    user_id: selectedUser,
                    sub_kegiatan_id: sub.id,
                }),
            ),
        }));
    };

    const hasSubKegiatan =
        (subKegiatanListByTahun[selectedTahun] || []).length > 0;
    const canInteract = !!selectedUser && hasSubKegiatan;

    const hasAnyPermissionForUser = (userId: number | null) => {
        if (!userId) return false;
        return data.permissions.some(
            (p) =>
                p.user_id === userId &&
                (p.can_create || p.can_update || p.can_delete),
        );
    };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Hak Akses" />
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl px-6 py-4">
                <span>
                    <h1 className="text-2xl font-bold uppercase">Hak Akses</h1>
                    <p className="text-sm text-muted-foreground">
                        Halaman ini digunakan untuk mengelola hak akses sub
                        kegiatan
                    </p>
                </span>

                <div className="flex items-center justify-between">
                    <div className="flex gap-4">
                        <div className="flex items-center gap-2">
                            <Label className="font-semibold">
                                Pilih Tahun:
                            </Label>
                            <Select
                                value={selectedTahun.toString()}
                                onValueChange={(val) =>
                                    setSelectedTahun(Number(val))
                                }
                            >
                                <SelectTrigger className="w-[200px]">
                                    <SelectValue placeholder="Pilih Tahun" />
                                </SelectTrigger>
                                <SelectContent>
                                    {tahunList.map((t) => (
                                        <SelectItem
                                            key={t.id}
                                            value={t.id.toString()}
                                        >
                                            {t.nama} ({t.jenis})
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </div>

                        <div className="flex items-center gap-2">
                            <Label className="font-semibold">
                                Pilih Operator:
                            </Label>
                            <Select
                                value={selectedUser?.toString() ?? ''}
                                onValueChange={(val) =>
                                    setSelectedUser(Number(val))
                                }
                            >
                                <SelectTrigger className="w-[200px]">
                                    <SelectValue placeholder="Pilih Operator" />
                                </SelectTrigger>
                                <SelectContent>
                                    {users.map((u) => (
                                        <SelectItem
                                            key={u.id}
                                            value={u.id.toString()}
                                        >
                                            {u.name}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                        </div>
                    </div>

                    <div className="flex items-center gap-2">
                        <Button
                            size="sm"
                            variant="outline"
                            onClick={checkAll}
                            disabled={!canInteract}
                        >
                            Check All
                        </Button>
                        <Button
                            size="sm"
                            variant="outline"
                            onClick={uncheckAll}
                            disabled={
                                !canInteract ||
                                !hasAnyPermissionForUser(selectedUser)
                            }
                        >
                            Uncheck All
                        </Button>

                        <Button
                            size="sm"
                            onClick={submitUpdate}
                            disabled={isSaveDisabled || !canInteract}
                        >
                            Simpan Hak Akses
                        </Button>
                    </div>
                </div>

                {!selectedUser && (
                    <div className="flex h-[500px] w-full items-center justify-center">
                        <div className="flex flex-col items-center justify-center text-muted-foreground">
                            <UserCircle className="mb-3 h-12 w-12 text-neutral-300" />
                            <Label className="text-neutral-300">
                                Silakan pilih operator terlebih dahulu
                            </Label>
                        </div>
                    </div>
                )}

                {selectedUser && (
                    <div className="max-h-[500px] overflow-y-auto rounded-md border">
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead className="w-12 text-center">
                                        No
                                    </TableHead>
                                    <TableHead>Sub Kegiatan</TableHead>
                                    <TableHead className="text-center">
                                        View
                                    </TableHead>
                                    <TableHead className="text-center">
                                        Create
                                    </TableHead>
                                    <TableHead className="text-center">
                                        Update
                                    </TableHead>
                                    <TableHead className="text-center">
                                        Delete
                                    </TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {(
                                    subKegiatanListByTahun[selectedTahun] || []
                                ).map((sub: SubKegiatan, idx) => {
                                    const perm = getPermission(
                                        sub.id,
                                        selectedUser,
                                    );

                                    return (
                                        <TableRow
                                            key={`${sub.id}-${selectedUser}`}
                                        >
                                            <TableCell className="text-center font-medium">
                                                {idx + 1}
                                            </TableCell>
                                            <TableCell className="font-medium break-words whitespace-normal">
                                                {sub.nama}
                                            </TableCell>
                                            <TableCell className="text-center">
                                                <PermissionCheckbox
                                                    permission={perm}
                                                    subId={sub.id}
                                                    userId={selectedUser}
                                                    field="can_view"
                                                    handleCheckbox={
                                                        handleCheckbox
                                                    }
                                                />
                                            </TableCell>
                                            <TableCell className="text-center">
                                                <PermissionCheckbox
                                                    permission={perm}
                                                    subId={sub.id}
                                                    userId={selectedUser}
                                                    field="can_create"
                                                    handleCheckbox={
                                                        handleCheckbox
                                                    }
                                                />
                                            </TableCell>
                                            <TableCell className="text-center">
                                                <PermissionCheckbox
                                                    permission={perm}
                                                    subId={sub.id}
                                                    userId={selectedUser}
                                                    field="can_update"
                                                    handleCheckbox={
                                                        handleCheckbox
                                                    }
                                                />
                                            </TableCell>
                                            <TableCell className="text-center">
                                                <PermissionCheckbox
                                                    permission={perm}
                                                    subId={sub.id}
                                                    userId={selectedUser}
                                                    field="can_delete"
                                                    handleCheckbox={
                                                        handleCheckbox
                                                    }
                                                />
                                            </TableCell>
                                        </TableRow>
                                    );
                                })}
                            </TableBody>
                        </Table>
                    </div>
                )}
            </div>
        </AppLayout>
    );
}

interface PermissionCheckboxProps {
    permission?: Permission;
    subId: number;
    userId: number;
    field: PermissionField;
    handleCheckbox: (
        userId: number,
        subId: number,
        field: PermissionField,
        value: boolean,
    ) => void;
}

function PermissionCheckbox({
    permission,
    subId,
    userId,
    field,
    handleCheckbox,
}: PermissionCheckboxProps) {
    const value = permission?.[field] ?? false;

    return (
        <input
            type="checkbox"
            checked={value}
            onChange={(e) =>
                handleCheckbox(userId, subId, field, e.target.checked)
            }
        />
    );
}