import ConfirmAlert from '@/components/custom-alert/custom-alert';
import { ColumnHeader } from '@/components/custom-datatable/d-header';
import DataTable from '@/components/custom-datatable/d-table';
import CustomFormSheet, { Field } from '@/components/custom-sheet/custom-sheet';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Switch } from '@/components/ui/switch';
import { useAuthBreadcrumb } from '@/hooks/use-auth-breadcrumb';
import AppLayout from '@/layouts/app-layout';
import { User } from '@/types';
import { Head, router } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import {
    MoreHorizontal,
    Pencil,
    ShieldCheck,
    Trash2,
    User2,
} from 'lucide-react';
import { useMemo, useState } from 'react';
import { toast, Toaster } from 'sonner';

type Props = {
    userList: User[];
};

type AlertType = 'delete';

export default function IndexMasyarakat({ userList }: Props) {
    const breadcrumbs = useAuthBreadcrumb();
    const [searchTerm, setSearchTerm] = useState('');
    const [openAlert, setOpenAlert] = useState(false);
    const [alertType, setAlertType] = useState<AlertType>();
    const [selectedUser, setSelectedUser] = useState<User>();
    const [editingUser, setEditingUser] = useState<User | undefined>(undefined);
    const [openSheet, setOpenSheet] = useState(false);

    const handleSubmit = (user: User) => {
        const formData = new FormData();
        formData.append('nik', String(user.nik));
        formData.append('name', String(user.name || ''));
        formData.append('email', String(user.email || ''));
        formData.append('no_wa', String(user.no_wa || ''));
        formData.append('role', String(user.role || ''));
        formData.append('is_active', String(Number(user.is_active)));

        // Cek jika password diisi, baru ditambahkan ke FormData
        if (user.password && user.password.trim() !== '') {
            formData.append('password', user.password);
        }

        // Cek jika `avatar` adalah file baru, baru ditambahkan ke FormData
        if (user.avatar && user.avatar instanceof File) {
            formData.append('avatar', user.avatar);
        }

        // Debug: tampilkan isi FormData sebelum dikirim
        console.log(
            'FormData sebelum dikirim:',
            Object.fromEntries(formData.entries()),
        );

        if (user.id) {
            // Update user, Laravel butuh _method: PUT jika pakai POST
            formData.append('_method', 'PUT');
            router.post(route('masyarakat.update', user.id), formData, {
                forceFormData: true, // penting agar Inertia mengirim FormData
                onSuccess: () => {
                    toast.success('Data masyarakat berhasil diperbarui');
                    setOpenSheet(false);
                },
                onError: (errors) => {
                    if (errors.name) {
                        toast.error(errors.name);
                    } else {
                        toast.error('Terjadi kesalahan saat update masyarakat');
                    }
                },
            });
        } else {
            // Tambah user baru
            router.post(route('masyarakat.store'), formData, {
                forceFormData: true,
                onSuccess: () => {
                    toast.success('Data masyarakat berhasil ditambahkan');
                    setOpenSheet(false);
                },
                onError: (errors) => {
                    if (errors.name) {
                        toast.error(errors.name);
                    } else {
                        toast.error(
                            'Terjadi kesalahan saat menambahkan masyarakat',
                        );
                    }
                },
            });
        }
    };

    const handleEdit = (user: User) => {
        setEditingUser({
            ...user,
            is_active: user.is_active ? '1' : '0',
            role: user.role?.toString(),
        });
        setOpenSheet(true);
    };

    const handleDelete = () => {
        router.delete(route('masyarakat.destroy', selectedUser?.id), {
            preserveState: true,
            preserveScroll: true,
            onSuccess: () => {
                toast.success('Data masyarakat telah dihapus');
                setSelectedUser(undefined);
            },
        });
    };

    const presentAlert = (user: User, type: AlertType) => {
        setSelectedUser(user);
        setAlertType(type);
        setOpenAlert(true);
    };

    const columns = useMemo<ColumnDef<User>[]>(
        () => [
            {
                id: 'no',
                header: () => <div className="text-center">#</div>,
                cell: ({ row }) => (
                    <div className="w-full text-center">{row.index + 1}</div>
                ),
                enableSorting: false,
                size: 40,
                minSize: 30,
            },
            {
                id: 'name',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="Nama" />
                ),
                enableSorting: false,
                cell: ({ row }) => {
                    const user = row.original;
                    return (
                        <div className="flex flex-col">
                            <span className="font-semibold">{user.name}</span>
                            <span className="text-xs text-muted-foreground">
                                ({user.nik})
                            </span>
                        </div>
                    );
                },
            },
            {
                id: 'role',
                accessorKey: 'role',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="Role" />
                ),
                enableSorting: false,
                cell: ({ row }) => {
                    const role = row.original.role;

                    // Tentukan warna dan ikon berdasarkan role
                    const {
                        color,
                        icon: Icon,
                        label,
                    } = role === 'admin'
                        ? {
                              color: 'bg-blue-100 text-blue-700',
                              icon: ShieldCheck,
                              label: 'Admin',
                          }
                        : {
                              color: 'bg-gray-100 text-gray-700',
                              icon: User2,
                              label: 'Masyarakat',
                          };

                    return (
                        <Badge
                            variant="outline"
                            className={`flex items-center gap-1 px-2 py-1 text-xs font-medium ${color}`}
                        >
                            <Icon size={14} />
                            {label}
                        </Badge>
                    );
                },
            },
            {
                id: 'is_active',
                accessorKey: 'is_active',
                header: ({ column }) => (
                    <ColumnHeader
                        className="text-center"
                        column={column}
                        title="Aktif ?"
                    />
                ),
                enableSorting: false,
                cell: ({ row }) => {
                    const user = row.original;

                    const handleToggle = (checked: boolean) => {
                        router.post(
                            route('masyarakat.toggleActive', user.id),
                            { is_active: checked ? 1 : 0 },
                            {
                                preserveScroll: true,
                                preserveState: true,
                                onSuccess: () => {
                                    toast.success(
                                        `Status ${user.name} berhasil diubah menjadi ${checked ? 'Aktif' : 'Tidak Aktif'}`,
                                    );
                                },
                                onError: () => {
                                    toast.error(
                                        'Gagal memperbarui status masyarakat',
                                    );
                                },
                            },
                        );
                    };

                    return (
                        <div className="flex justify-center">
                            <Switch
                                checked={!!user.is_active}
                                onCheckedChange={handleToggle}
                            />
                        </div>
                    );
                },
            },
            {
                id: 'actions',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="Aksi" />
                ),
                enableSorting: false,
                cell: ({ row }) => {
                    const datauser = row.original;
                    return (
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button
                                    variant="ghost"
                                    className="flex h-8 w-8 p-0"
                                >
                                    <MoreHorizontal />
                                    <span className="sr-only">Open menu</span>
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent
                                align="center"
                                side="left"
                                className="w-[160px]"
                            >
                                <DropdownMenuLabel>Aksi</DropdownMenuLabel>
                                <DropdownMenuItem
                                    onClick={() => handleEdit(datauser)}
                                >
                                    <Pencil />
                                    Edit
                                </DropdownMenuItem>
                                <DropdownMenuItem
                                    onClick={() =>
                                        presentAlert(datauser, 'delete')
                                    }
                                >
                                    <Trash2 />
                                    Hapus
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    );
                },
                size: 50,
            },
        ],
        [],
    );

    const userFields: Field[] = [
        {
            key: 'avatar',
            name: 'avatar',
            label: 'Foto',
            type: 'file',
            accept: 'image/jpeg, image/jpg',
            baseURL: '/storage/avatars',
            required: false,
        },
        {
            key: 'name',
            name: 'name',
            label: 'Nama',
            type: 'text',
            placeholder: 'Ketik nama',
            required: true,
            autoComplete: 'username',
        },
        {
            key: 'nik',
            name: 'nik',
            label: 'NIK',
            type: 'number',
            placeholder: 'Ketik NIK',
            required: true,
            autoComplete: 'username',
            numericOnly: true,
            numericNoFormat: true,
        },
        {
            key: 'no_wa',
            name: 'no_wa',
            label: 'Nomor Whatsapp',
            type: 'text',
            placeholder: 'Ketik nomor whatsapp',
            autoComplete: 'off',
            minLength: 11,
            maxLength: 14,
            numericOnly: true,
            numericNoFormat: true,
            required: true,
        },
        {
            key: 'email',
            name: 'email',
            label: 'Email',
            type: 'email',
            placeholder: 'Ketik email',
            required: true,
            autoComplete: 'username',
        },
        {
            key: 'password',
            name: 'password',
            label: 'Password',
            type: 'password',
            placeholder: 'Ketik password',
            required: false,
            autoComplete: 'current-password',
        },
        {
            key: 'role',
            name: 'role',
            label: 'Role',
            type: 'select',
            required: true,
            options: [{ value: 'masyarakat', label: 'Masyarakat' }],
        },
        {
            key: 'is_active',
            name: 'is_active',
            label: 'Di aktifkan ?',
            type: 'select',
            required: true,
            options: [
                { value: '0', label: 'Tidak Aktif' },
                { value: '1', label: 'Aktif' },
            ],
        },
    ];

    const filteredData = (userList ?? []).filter(
        (user) =>
            user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
            user.nik.toLowerCase().includes(searchTerm.toLowerCase()),
    );

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Masyarakat" />
            <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">Masyarakat</h1>
                    <p className="text-sm text-muted-foreground">
                        Halaman ini digunakan untuk mengelola data masyarakat
                    </p>
                </span>
                <DataTable
                    columns={columns}
                    data={filteredData}
                    searchValue={searchTerm}
                    onSearchChange={setSearchTerm}
                />
            </div>

            <CustomFormSheet
                title={editingUser ? 'Edit Masyarakt' : 'Tambah Masyarakt'}
                open={openSheet}
                onOpenChange={setOpenSheet}
                data={editingUser}
                fields={userFields}
                onSave={handleSubmit}
            />

            <ConfirmAlert
                title={`Konfirmasi ${alertType}`}
                message={`Apakah Anda yakin ingin ${alertType === 'delete' ? 'menghapus' : ''} data ini?`}
                submessage={`"${selectedUser?.name}"`}
                open={openAlert}
                onOpenChange={setOpenAlert}
                onConfirm={alertType === 'delete' ? handleDelete : () => {}}
            />

            <Toaster position="top-right" />
        </AppLayout>
    );
}