"use client"

import { useState, useEffect } from "react";
import Swal from "sweetalert2";

interface ClearAuthModalProps {
    tenant_id: string;
    onClose: () => void;
}

interface DLMSitesData {
    id: string;
    name: string;
}

interface NozzleListTenant {
    id: string;
    name: string;
}

export default function showAddNozzleModal({
    tenant_id, onClose,
} : ClearAuthModalProps) {
    const [sites, setSites] = useState<DLMSitesData[]>([]);
    const [nozzleList, setNozzleList] = useState<NozzleListTenant[]>([]);
    const [loadingSites, setLoadingSites] = useState(true);
    const [selectedSites, setSelectedSites] = useState("");
    const [selectedConnector, setSelectedConnector] = useState("");
    const [maxPowerKw, setMaxPowerkW] = useState(0);
    const [minPowerKw, setMinPowerkW] = useState(0);
    const [priority, setPriority] = useState(0);
    const [priorityWeight, setPriorityWeight] = useState(0);
    const [selectedActive, setSelectedActive] = useState("");
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (!tenant_id) { 
            return; 
        }

        const loadListSites = async () => {
            try {
                setLoadingSites(true);
                const fd = new FormData();
                fd.append("tenant_id", tenant_id);

                const response = await fetch("/api/monitoring/charger/dlm/sites",
                    {
                        method: "POST",
                        body: fd,
                    }
                );

                if (!response.ok) {
                    throw new Error(`Failed to fetch charger monitoring (${response.status})`);
                }

                const result = await response.json();
                if (!result?.data) { 
                    throw new Error("Charger detail data not found"); 
                }
                setSites(result.data);
            } catch (err) {
                console.log("Failed to load server infrastructure:", err);
            } finally {
                setLoadingSites(false);
            }
        };

        loadListSites();
    }, [tenant_id])

    useEffect(() => {
        if (!tenant_id) { 
            return; 
        }

        const loadListSites = async () => {
            try {
                setLoadingSites(true);
                const fd = new FormData();
                fd.append("tenant_id", tenant_id);

                const response = await fetch("/api/monitoring/charger/dlm/nozzle/list",
                    {
                        method: "POST",
                        body: fd,
                    }
                );

                if (!response.ok) {
                    throw new Error(`Failed to fetch charger monitoring (${response.status})`);
                }

                const result = await response.json();
                if (!result?.data) { 
                    throw new Error("Charger detail data not found"); 
                }
                setNozzleList(result.data);
            } catch (err) {
                console.log("Failed to load server infrastructure:", err);
            } finally {
                setLoadingSites(false);
            }
        };

        loadListSites();
    }, [tenant_id])

    const handleGetDiagnostics = async () => {
        onClose();
        Swal.fire({
            title: "Processing Sending Local Version...",
            text: "Please wait",
            allowOutsideClick: false,
            didOpen: () => {
            Swal.showLoading();
            },
        });
        try {
            setLoading(true);

            const fd = new FormData();

            fd.append("tenant_id", tenant_id);
            fd.append("sites_id", selectedSites); 
            fd.append("connector_id", selectedConnector);  
            fd.append("max_power_kw", String(maxPowerKw));  
            fd.append("min_power_kw", String(minPowerKw));  
            fd.append("priority", String(priority));  
            fd.append("priority_weight", String(priorityWeight));  
            fd.append("active", selectedActive);  

            const response = await fetch("/api/monitoring/charger/dlm/nozzle", {
                method: "POST",
                body: fd,
            });

            if (!response.ok) {
                throw new Error("Failed to clear authorization");
            }

            Swal.close();
            const result = await response.json();

            if (!result.result) {
                Swal.fire({
                    icon: "error",
                    title: "Failed",
                    text: result.msg || "Something went wrong 1",
                    allowOutsideClick: false,
                });
                return;
            }
            Swal.fire({
                icon: "success",
                title: "Success!",
                text: result.msg,
                allowOutsideClick: false,
            });
        } catch (err) {
            Swal.close();
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Something went wrong 2",
                allowOutsideClick: false,
            });
        }
    };
    return (
        <>
            <div className="modal modal-blur fade show d-block" tabIndex={-1} role="dialog" style={{ backgroundColor: "rgba(0, 0, 0, 0.4)" }}>
                <div className="modal-dialog modal-dialog-centered" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h5 className="modal-title">Add Nozzle to DLM Sites</h5>
                            <button type="button" className="btn-close" onClick={onClose}></button>
                        </div>

                        <div className="modal-body">
                            <form className="space-y" onSubmit={(e) => { e.preventDefault(); handleGetDiagnostics(); }}>
                                <div className="row">
                                    <div className="col-6">
                                        <label className="form-label">DLM Sites</label>
                                        <select name="tier_id" className="form-select" value={selectedSites} onChange={(e) => setSelectedSites(e.target.value)}>
                                            <option value="">{loadingSites ? "Loading Sites..." : "Choose Sites"}</option>
                                            {sites.map((site) => (
                                                <option key={site.id} value={site.id}>
                                                    {site.name}
                                                </option>
                                            ))}
                                        </select>
                                    </div>
                                    <div className="col-6">
                                        <label className="form-label">Connector / Nozzle</label>
                                        <select name="tier_id" className="form-select" value={selectedConnector} onChange={(e) => setSelectedConnector(e.target.value)}>
                                            <option value="">{loadingSites ? "Loading Sites..." : "Choose Sites"}</option>
                                            {nozzleList.map((site) => (
                                                <option key={site.id} value={site.id}>
                                                    {site.name}
                                                </option>
                                            ))}
                                        </select>
                                    </div>
                                </div>
                                <div className="row">
                                    <div className="col-6">
                                        <div>
                                            <label className="form-label">Max Power kW</label>
                                            <input type="number" name="start_date" className="form-control" onChange={(e) => setMaxPowerkW(Number(e.target.value)) }/>
                                        </div>
                                    </div>
                                    <div className="col-6">
                                        <div>
                                            <label className="form-label">Min Power kW</label>
                                            <input type="number" name="start_date" className="form-control" onChange={(e) => setMinPowerkW(Number(e.target.value)) }/>
                                        </div>
                                    </div>
                                </div>
                                <div className="row">
                                    <div className="col-6">
                                        <div>
                                            <label className="form-label">Priority</label>
                                            <input type="number" name="start_date" className="form-control" onChange={(e) => setPriority(Number(e.target.value)) }/>
                                        </div>
                                    </div>
                                    <div className="col-6">
                                        <div>
                                            <label className="form-label">Priority Weight</label>
                                            <input type="number" name="start_date" className="form-control" onChange={(e) => setPriorityWeight(Number(e.target.value)) }/>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <label className="form-label">Active</label>
                                    <select name="tier_id" className="form-select" value={selectedActive} onChange={(e) => setSelectedActive(e.target.value)}>
                                        <option value="true">Active</option>
                                        <option value="false">No Active</option>
                                    </select>
                                </div>
                            </form>
                        </div>

                        <div className="modal-footer">
                            <button type="button" className="btn btn-danger btn-outline" onClick={onClose}>Cancel</button>
                            <button type="button" className="btn btn-success btn-outline" onClick={handleGetDiagnostics} disabled={loading}>
                                {loading ? ( 
                                    <><span className="spinner-border spinner-border-sm me-2" role="status" /> Assigning Nozzle... </> 
                                ) : ( 
                                    <> <i className="ti ti-http-get me-1" /> Assign Nozzle </> 
                                )}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}