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 {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { useAuthBreadcrumb } from '@/hooks/use-auth-breadcrumb';
import AppLayout from '@/layouts/app-layout';
import { LokasiAir } from '@/types';
import { Head, router } from '@inertiajs/react';
import { ColumnDef } from '@tanstack/react-table';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { CheckCircle, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
import { useMemo, useState } from 'react';
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import { toast, Toaster } from 'sonner';

import iconRetina from 'leaflet/dist/images/marker-icon-2x.png';
import icon from 'leaflet/dist/images/marker-icon.png';
import shadow from 'leaflet/dist/images/marker-shadow.png';

L.Icon.Default.mergeOptions({
    iconRetinaUrl: iconRetina,
    iconUrl: icon,
    shadowUrl: shadow,
});

type Props = {
    airList: LokasiAir[];
};

type AlertType = 'delete';

export default function IndexAir({ airList }: Props) {
    const breadcrumbs = useAuthBreadcrumb();
    const [searchTerm, setSearchTerm] = useState('');
    const [openAlert, setOpenAlert] = useState(false);
    const [alertType, setAlertType] = useState<AlertType>();
    const [selectedAir, setSelectedAir] = useState<LokasiAir>();
    const [editingAir, setEditingAir] = useState<LokasiAir | undefined>(
        undefined,
    );
    const [openSheet, setOpenSheet] = useState(false);

    const handleSubmit = (lokasiair: LokasiAir) => {
        const formData = new FormData();
        formData.append('nama', String(lokasiair.nama || ''));
        formData.append('deskripsi', String(lokasiair.deskripsi || ''));
        formData.append('latitude', String(lokasiair.latitude || ''));
        formData.append('longitude', String(lokasiair.longitude || ''));

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

        if (lokasiair.id) {
            formData.append('_method', 'PUT');
            router.post(route('lokasiair.update', lokasiair.id), formData, {
                forceFormData: true,
                onSuccess: () => {
                    toast.success('Lokasi air berhasil diperbarui');
                    setOpenSheet(false);
                },
                onError: (errors) => {
                    if (errors.nama) {
                        toast.error(errors.nama);
                    } else {
                        toast.error('Terjadi kesalahan saat update lokasi air');
                    }
                },
            });
        } else {
            router.post(route('lokasiair.store'), formData, {
                forceFormData: true,
                onSuccess: () => {
                    toast.success('Lokasi air berhasil ditambahkan');
                    setOpenSheet(false);
                },
                onError: (errors) => {
                    if (errors.nama) {
                        toast.error(errors.nama);
                    } else {
                        toast.error(
                            'Terjadi kesalahan saat menambahkan lokasi air',
                        );
                    }
                },
            });
        }
    };

    const handleEdit = (lokasiair: LokasiAir) => {
        setEditingAir({
            ...lokasiair,
        });
        setOpenSheet(true);
    };

    const handleDelete = () => {
        router.delete(route('lokasiair.destroy', selectedAir?.id), {
            preserveState: true,
            preserveScroll: true,
            onSuccess: () => {
                toast.success('Lokasi air telah dihapus');
                setSelectedAir(undefined);
            },
        });
    };

    const presentAlert = (lokasiair: LokasiAir, type: AlertType) => {
        setSelectedAir(lokasiair);
        setAlertType(type);
        setOpenAlert(true);
    };

    // untuk modal map
    const [openMap, setOpenMap] = useState(false);
    const [selectedLocation, setSelectedLocation] = useState<{
        lat: number;
        lng: number;
    } | null>(null);

    const handleOpenMap = (lat: number, lng: number) => {
        setSelectedLocation({ lat, lng });
        setOpenMap(true);
    };

    const columns = useMemo<ColumnDef<LokasiAir>[]>(
        () => [
            {
                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: 'nama',
                accessorKey: 'nama',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="NAMA" />
                ),
                enableSorting: false,
            },
            {
                id: 'lokasi',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="Lokasi" />
                ),
                enableSorting: false,
                cell: ({ row }) => {
                    const lokasi = row.original;
                    return (
                        <Badge
                            onClick={() =>
                                handleOpenMap(lokasi.latitude, lokasi.longitude)
                            }
                            variant={'outline'}
                            className="flex cursor-pointer items-center gap-1 bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700"
                        >
                            <CheckCircle size={14} />
                            {lokasi.latitude},{lokasi.longitude}
                        </Badge>
                    );
                },
            },
            {
                id: 'actions',
                header: ({ column }) => (
                    <ColumnHeader column={column} title="Aksi" />
                ),
                enableSorting: false,
                cell: ({ row }) => {
                    const dataair = 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(dataair)}
                                >
                                    <Pencil />
                                    Edit
                                </DropdownMenuItem>
                                <DropdownMenuItem
                                    onClick={() =>
                                        presentAlert(dataair, 'delete')
                                    }
                                >
                                    <Trash2 />
                                    Hapus
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    );
                },
                size: 50,
            },
        ],
        [],
    );

    const userFields: Field[] = [
        {
            key: 'nama',
            name: 'nama',
            label: 'Nama',
            type: 'text',
            placeholder: 'Ketik nama lokasi',
            required: true,
            autoComplete: 'off',
        },
        {
            key: 'deskripsi',
            name: 'deskripsi',
            label: 'Deskripsi',
            type: 'text',
            placeholder: 'Ketik deskripsi',
            required: false,
            autoComplete: 'off',
        },
        {
            key: 'lokasi',
            name: 'lokasi',
            label: 'Pilih Lokasi',
            type: 'map',
        },
        {
            key: 'latitude',
            name: 'latitude',
            label: 'Latitude',
            type: 'text',
            placeholder: 'Ketik latitude',
            required: true,
            autoComplete: 'off',
        },
        {
            key: 'longitude',
            name: 'longitude',
            label: 'Longitude',
            type: 'text',
            placeholder: 'Ketik longitude',
            required: true,
            autoComplete: 'off',
        },
    ];

    const filteredData = (airList ?? []).filter((lokasiair) =>
        lokasiair.nama.toLowerCase().includes(searchTerm.toLowerCase()),
    );

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Lokasi Air" />
            <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">Lokasi Air</h1>
                    <p className="text-sm text-muted-foreground">
                        Halaman ini digunakan untuk mengelola lokasi air
                    </p>
                </span>
                <DataTable
                    columns={columns}
                    data={filteredData}
                    searchValue={searchTerm}
                    onSearchChange={setSearchTerm}
                    onAddClick={() => {
                        setEditingAir(undefined);
                        setOpenSheet(true);
                    }}
                />
            </div>

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

            <Dialog open={openMap} onOpenChange={setOpenMap}>
                <DialogContent className="md:max-w-3xl">
                    <DialogHeader>
                        <DialogTitle>Peta Lokasi</DialogTitle>
                    </DialogHeader>

                    <div className="mt-2 h-[400px] w-full overflow-hidden rounded-lg">
                        {selectedLocation && (
                            <MapContainer
                                center={[
                                    selectedLocation.lat,
                                    selectedLocation.lng,
                                ]}
                                zoom={16}
                                style={{ height: '100%', width: '100%' }}
                            >
                                <TileLayer
                                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                                />
                                <Marker
                                    position={[
                                        selectedLocation.lat,
                                        selectedLocation.lng,
                                    ]}
                                >
                                    <Popup>
                                        Lokasi: {selectedLocation.lat},{' '}
                                        {selectedLocation.lng}
                                    </Popup>
                                </Marker>
                            </MapContainer>
                        )}
                    </div>

                    <DialogFooter>
                        <Button onClick={() => setOpenMap(false)}>Tutup</Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>

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

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