import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { SakipNode } from '@/types';
import { useEffect, useState } from 'react';
import { toast } from 'sonner';
import { Input } from '../ui/input';
import { ScrollArea } from '../ui/scroll-area';

type SaveData = {
    id?: number;
    uraian: string;
    satuan?: string | null;
    target?: string | null;
    kategori: string;
    parent_id?: number | null;
    formulasi?: string | null;
    keterangan?: string | null;
    sumber_data?: string | null;
    tipe?: string | null;
};

type SelectOption = {
    value: string;
    label: string;
};

type SakipNodeModalProps = {
    isOpen: boolean;
    onOpenChange: (open: boolean) => void;
    selectedItem: SakipNode | null;
    onSave: (data: SaveData) => void;
    resourceName: string;
    title: string;
    parentOptions?: SelectOption[];
    parentLabel?: string;
};

export default function SakipNodeModal({
    isOpen,
    onOpenChange,
    selectedItem,
    onSave,
    resourceName,
    title,
    parentOptions,
    parentLabel,
}: SakipNodeModalProps) {
    const [uraian, setUraian] = useState('');
    const [satuan, setSatuan] = useState('');
    const [target, setTarget] = useState('');
    const [parentId, setParentId] = useState<string | null>(null);
    const [tipe, setTipe] = useState<string>('');
    const [formulasi, setFormulasi] = useState('');
    const [keterangan, setKeterangan] = useState('');
    const [sumberData, setSumberData] = useState('');

    useEffect(() => {
        if (selectedItem) {
            setUraian(selectedItem.uraian || '');
            setSatuan(selectedItem.satuan || '');
            setTarget(selectedItem.target || '');
            setParentId(
                selectedItem.parent_id != null
                    ? String(selectedItem.parent_id)
                    : '',
            );
            setTipe(selectedItem.tipe || '');
            setFormulasi(selectedItem.formulasi || '');
            setKeterangan(selectedItem.keterangan || '');
            setSumberData(selectedItem.sumber_data || '');
        } else {
            setUraian('');
            setSatuan('');
            setTarget('');
            setParentId('');
            setTipe('');
            setFormulasi('');
            setKeterangan('');
            setSumberData('');
        }
    }, [selectedItem, isOpen]);

    const isEditMode = Boolean(selectedItem);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        if (!uraian.trim()) {
            toast.error('Uraian tidak boleh kosong!', {
                style: {
                    background: '#dc2626',
                    color: 'white',
                },
            });
            return;
        }

        const data: SaveData = {
            uraian: uraian.trim(),
            satuan: satuan.trim() ? satuan.trim() : null,
            target: target.trim() ? target.trim() : null,
            kategori: resourceName,
            parent_id: parentId ? Number(parentId) : null,
            tipe: tipe || null,
            formulasi: formulasi.trim() ? formulasi.trim() : null,
            keterangan: keterangan.trim() ? keterangan.trim() : null,
            sumber_data: sumberData.trim() ? sumberData.trim() : null,
        };

        if (isEditMode && selectedItem?.id) {
            data.id = selectedItem.id;
        }

        onSave(data);
    };

    return (
        <Dialog open={isOpen} onOpenChange={onOpenChange}>
            <DialogContent className="flex max-h-[min(600px,80vh)] flex-col gap-0 border-0 bg-emerald-700 p-0 sm:max-w-2xl">
                <DialogHeader className="py-6 text-white">
                    <DialogTitle className="text-center uppercase">
                        {isEditMode ? 'Ubah' : 'Tambah'} {title}
                    </DialogTitle>
                    <DialogDescription className="text-center text-sm text-white">
                        Periksa data sebelum diinput. 🤪
                    </DialogDescription>
                </DialogHeader>
                <ScrollArea className="flex max-h-full flex-col overflow-hidden">
                    <div className="bg-white px-6 py-8">
                        <form id="form-kertas" onSubmit={handleSubmit}>
                            <div className="grid gap-4">
                                {/* Select Tipe */}
                                <div className="grid grid-cols-4 items-center gap-2">
                                    <Label
                                        className="col-span-1"
                                        htmlFor="tipe"
                                    >
                                        Tipe
                                    </Label>
                                    <div className="col-span-3">
                                        <Select
                                            onValueChange={(val) =>
                                                setTipe(
                                                    val === 'none' ? '' : val,
                                                )
                                            }
                                            value={tipe || 'none'}
                                        >
                                            <SelectTrigger>
                                                <SelectValue placeholder="Pilih Tipe" />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value="none">
                                                    ---
                                                </SelectItem>
                                                <SelectItem value="Teknis">
                                                    Teknis
                                                </SelectItem>
                                                <SelectItem value="Rutin">
                                                    Rutin
                                                </SelectItem>
                                            </SelectContent>
                                        </Select>
                                    </div>
                                </div>

                                {/* Parent Select */}
                                {parentOptions && parentLabel && (
                                    <div className="grid grid-cols-4 items-center gap-2">
                                        <Label
                                            className="col-span-1"
                                            htmlFor="parent"
                                        >
                                            {parentLabel}
                                        </Label>
                                        <div className="col-span-3">
                                            <Select
                                                onValueChange={setParentId}
                                                value={parentId || ''}
                                            >
                                                <SelectTrigger>
                                                    <SelectValue
                                                        placeholder={`Pilih ${parentLabel}`}
                                                    />
                                                </SelectTrigger>
                                                <SelectContent className="max-h-60 w-[var(--radix-select-trigger-width)] overflow-y-auto">
                                                    {parentOptions.map(
                                                        (option) => (
                                                            <SelectItem
                                                                key={
                                                                    option.value
                                                                }
                                                                value={
                                                                    option.value
                                                                }
                                                            >
                                                                {option.label}
                                                            </SelectItem>
                                                        ),
                                                    )}
                                                </SelectContent>
                                            </Select>
                                        </div>
                                    </div>
                                )}

                                {/* Uraian */}
                                <div className="grid grid-cols-4 items-center gap-2">
                                    <Label
                                        className="col-span-1"
                                        htmlFor="uraian"
                                    >
                                        Uraian
                                    </Label>
                                    <div className="col-span-3">
                                        <Textarea
                                            id="uraian"
                                            value={uraian}
                                            onChange={(e) =>
                                                setUraian(e.target.value)
                                            }
                                            required
                                        />
                                    </div>
                                </div>

                                {/* Satuan & Target */}
                                {(selectedItem?.kategori
                                    ?.toLowerCase()
                                    .startsWith('indikator') ||
                                    resourceName
                                        .toLowerCase()
                                        .startsWith('indikator')) && (
                                    <div>
                                        <div className="grid grid-cols-4 items-center gap-2">
                                            {/* Label di kiri */}
                                            <Label className="col-span-1">
                                                Satuan / Target
                                            </Label>

                                            {/* Dua input sejajar di kanan */}
                                            <div className="col-span-3 grid grid-cols-2 gap-4">
                                                <Input
                                                    id="satuan"
                                                    name="satuan"
                                                    type="text"
                                                    placeholder="Satuan"
                                                    value={satuan}
                                                    onChange={(e) =>
                                                        setSatuan(
                                                            e.target.value,
                                                        )
                                                    }
                                                />
                                                <Input
                                                    id="target"
                                                    name="target"
                                                    type="text"
                                                    placeholder="Target"
                                                    value={target}
                                                    onChange={(e) =>
                                                        setTarget(
                                                            e.target.value,
                                                        )
                                                    }
                                                />
                                            </div>
                                        </div>

                                        {/* Formulasi */}
                                        <div className="grid grid-cols-4 items-center gap-2 pt-4">
                                            <Label
                                                className="col-span-1"
                                                htmlFor="formulasi"
                                            >
                                                Formulasi
                                            </Label>
                                            <div className="col-span-3">
                                                <Textarea
                                                    id="formulasi"
                                                    value={formulasi}
                                                    onChange={(e) =>
                                                        setFormulasi(
                                                            e.target.value,
                                                        )
                                                    }
                                                />
                                            </div>
                                        </div>

                                        {/* Keterangan */}
                                        <div className="grid grid-cols-4 items-center gap-2 pt-4">
                                            <Label
                                                className="col-span-1"
                                                htmlFor="keterangan"
                                            >
                                                Keterangan
                                            </Label>
                                            <div className="col-span-3">
                                                <Textarea
                                                    id="keterangan"
                                                    value={keterangan}
                                                    onChange={(e) =>
                                                        setKeterangan(
                                                            e.target.value,
                                                        )
                                                    }
                                                />
                                            </div>
                                        </div>

                                        {/* Sumber Data */}
                                        <div className="grid grid-cols-4 items-center gap-2 pt-4">
                                            <Label
                                                className="col-span-1"
                                                htmlFor="sumber_data"
                                            >
                                                Sumber Data
                                            </Label>
                                            <div className="col-span-3">
                                                <Textarea
                                                    id="sumber_data"
                                                    value={sumberData}
                                                    onChange={(e) =>
                                                        setSumberData(
                                                            e.target.value,
                                                        )
                                                    }
                                                />
                                            </div>
                                        </div>
                                    </div>
                                )}
                            </div>
                        </form>
                    </div>
                </ScrollArea>
                <DialogFooter className="z-10 flex-shrink-0 border-t py-4 pe-6">
                    <Button
                        form="form-kertas"
                        size={'sm'}
                        variant={'default'}
                        className="bg-emerald-500 text-white hover:bg-emerald-600"
                        type="submit"
                    >
                        {isEditMode ? 'Simpan Perubahan' : 'Simpan'}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}