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';

type SaveData = {
    id?: number;
    uraian: string;
    satuan?: string | null;
    target?: string | null;
    kategori: string;
    parent_id?: number | 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[]; // Optional parent selection
    parentLabel?: string; // Label for the parent select
};

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);

    // Effect to populate form when an item is selected for editing
    useEffect(() => {
        if (selectedItem) {
            console.log('selectedItem', selectedItem);
            console.log('parent_id dari item:', selectedItem.parent_id);
            console.log('parentOptions:', parentOptions);

            setUraian(selectedItem.uraian);
            setSatuan(selectedItem.satuan);
            setTarget(selectedItem.target);
            setParentId(
                selectedItem.parent_id != null
                    ? String(selectedItem.parent_id) // pastikan string
                    : '',
            );
        } else {
            setUraian('');
            setSatuan('');
            setTarget('');
            setParentId('');
        }
    }, [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', // merah
                    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,
        };

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

        onSave(data);
    };

    return (
        <Dialog open={isOpen} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-2xl">
                <DialogHeader>
                    <DialogTitle>
                        {isEditMode ? 'Ubah' : 'Tambah'} {title}
                    </DialogTitle>
                    <DialogDescription>
                        Periksa data sebelum diinput
                    </DialogDescription>
                </DialogHeader>
                <form onSubmit={handleSubmit}>
                    <div className="grid gap-4">
                        {/* Parent Select Input (if options are provided) */}
                        {parentOptions && parentLabel && (
                            <div className="items-center gap-4">
                                <Label htmlFor="parent">{parentLabel}</Label>
                                <Select
                                    onValueChange={setParentId}
                                    value={parentId || ''}
                                >
                                    <SelectTrigger className="col-span-3 mt-2 h-12">
                                        <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>
                        )}

                        {/* Uraian Textarea */}
                        <div className="items-start gap-4">
                            <Label htmlFor="uraian">Uraian</Label>
                            <Textarea
                                id="uraian"
                                className="mt-2"
                                value={uraian}
                                onChange={(e) => setUraian(e.target.value)}
                                required
                            />
                        </div>

                        {/* Tampilkan input Satuan & Target hanya jika kategori diawali dengan "indikator" */}
                        {(selectedItem?.kategori
                            ?.toLowerCase()
                            .startsWith('indikator') ||
                            resourceName
                                .toLowerCase()
                                .startsWith('indikator')) && (
                            <div className="flex justify-between gap-4">
                                <div className="flex w-1/2 flex-col">
                                    <Label htmlFor="satuan">Satuan</Label>
                                    <Input
                                        id="satuan"
                                        name="satuan"
                                        type="text"
                                        className="mt-2"
                                        value={satuan}
                                        onChange={(e) =>
                                            setSatuan(e.target.value)
                                        }
                                    />
                                </div>
                                <div className="flex w-1/2 flex-col">
                                    <Label htmlFor="target">Target</Label>
                                    <Input
                                        id="target"
                                        name="target"
                                        type="text"
                                        className="mt-2"
                                        value={target}
                                        onChange={(e) =>
                                            setTarget(e.target.value)
                                        }
                                    />
                                </div>
                            </div>
                        )}
                    </div>
                    <DialogFooter className="pt-4">
                        <Button
                            size={'sm'}
                            variant={'default'}
                            className="bg-emerald-600 text-white"
                            type="submit"
                        >
                            {isEditMode ? 'Perbaharui' : 'Simpan'}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}