import React, { useState } from "react";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";

interface TechnicalRequirement {
    id: number;
    name: string;
    result: number;
}

interface PersyaratanTeknisModalProps {
    open: boolean;
    onClose: () => void;
}

const PersyaratanTeknisModal: React.FC<PersyaratanTeknisModalProps> = ({
    open,
    onClose,
}) => {
    const initialRequirements: TechnicalRequirement[] = [
        { id: 1, name: "Instalasi pengolah air limbah", result: 0 },
        { id: 2, name: "Flowmeter", result: 0 },
        { id: 3, name: "Titik pengambilan sampel", result: 0 },
        { id: 4, name: "Saluran air limbah & air hujan terpisah", result: 0 },
    ];

    const [requirements, setRequirements] =
        useState<TechnicalRequirement[]>(initialRequirements);
    const [uploaded, setUploaded] = useState(false);

    const handleSelectChange = (id: number, value: string) => {
        let resultValue = 0;
        if (value === "ada-berfungsi") resultValue = 100;
        else if (value === "ada-tidak-berfungsi") resultValue = 50;
        else if (value === "tidak-ada") resultValue = 0;

        setRequirements(
            requirements.map((req) =>
                req.id === id ? { ...req, result: resultValue } : req
            )
        );
    };

    const handleUpload = () => {
        // Simulasi upload dokumen, kemudian enable dropdown
        setUploaded(true);
    };

    const handleSave = () => {
        // Lakukan penyimpanan data persyaratan teknis
        onClose();
    };

    return (
        <Dialog open={open} onOpenChange={onClose}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Persyaratan Teknis</DialogTitle>
                </DialogHeader>
                <div className="my-4 space-y-4">
                    {!uploaded && (
                        <Button variant="outline" onClick={handleUpload}>
                            Upload Dokumen
                        </Button>
                    )}
                    {requirements.map((req) => (
                        <div
                            key={req.id}
                            className="flex items-center justify-between"
                        >
                            <span>{req.name}</span>
                            <Select
                                disabled={!uploaded}
                                value={req.result.toString()}
                                onValueChange={(value) =>
                                    handleSelectChange(req.id, value)
                                }
                            >
                                <SelectTrigger className="w-36">
                                    <SelectValue placeholder="Pilih Hasil" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="ada-berfungsi">
                                        Ada Berfungsi
                                    </SelectItem>
                                    <SelectItem value="ada-tidak-berfungsi">
                                        Ada Tidak Berfungsi
                                    </SelectItem>
                                    <SelectItem value="tidak-ada">
                                        Tidak Ada
                                    </SelectItem>
                                </SelectContent>
                            </Select>
                        </div>
                    ))}
                </div>
                <DialogFooter>
                    <Button variant="outline" onClick={onClose}>
                        Batal
                    </Button>
                    <Button onClick={handleSave}>Simpan</Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};

export default PersyaratanTeknisModal;