"use client"

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

interface Tier {
    id: string;
    code: string;
    name: string;
}

interface ServerNode {
    server_node_id: string;
    server_code: string;
    server_name: string;
    server_type: string;
    tier_id: string;
    host: string;
    port: number;
}

export default function AddTenant({
    tenant_id
}:{
    tenant_id: string;
}) {
    const [tiers, setTiers] = useState<Tier[]>([]);
    const [serverNodes, setServerNodes] = useState<ServerNode[]>([]);
    const [tierId, setTierId] = useState("");

    const [loadingTier, setLoadingTier] = useState(true);
    const [submitting, setSubmitting] = useState(false);
    const selectedTier = tiers.find((tier) => tier.id === tierId);
    const tierCode = selectedTier?.code?.toLowerCase();

    const handleTierChange = (value: string) => {
        setTierId(value);
        const selected = tiers.find((t) => t.id === value);
        const code = selected?.code?.toLowerCase();

        loadServerNodes(value, code);
    };

    const loadServerNodes = async (tierId: string, tierCode?: string) => {
        // Enterprise -> kosong 3 buah
        if (tierCode === "enterprise") {
            setServerNodes([
                {
                    server_node_id: "",
                    server_code: "",
                    server_name: "",
                    server_type: "",
                    tier_id: tierId,
                    host: "",
                    port: 0,
                },
                {
                    server_node_id: "",
                    server_code: "",
                    server_name: "",
                    server_type: "",
                    tier_id: tierId,
                    host: "",
                    port: 0,
                },
                {
                    server_node_id: "",
                    server_code: "",
                    server_name: "",
                    server_type: "",
                    tier_id: tierId,
                    host: "",
                    port: 0,
                },
            ]);

            return;
        }

        const fd = new FormData();
        fd.append("tier_id", tierId);

        const response = await fetch("/api/tenant/server-node", {
            method: "POST",
            body: fd,
        });

        const result = await response.json();

        setServerNodes(result.data ?? []);
    };

    useEffect(() => {
        const loadTiers = async () => {
            try {
                const response = await fetch("/api/tenant/tier");

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

                const result = await response.json();

                setTiers(result.data ?? []);
            } catch (error) {
                console.error("Failed to load tiers:", error);
            } finally {
                setLoadingTier(false);
            }
        };

        loadTiers();
    }, []);

    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        Swal.fire({
            title: "Creating New Tenant / CPO...",
            text: "Please wait",
            allowOutsideClick: false,
            didOpen: () => {
            Swal.showLoading();
            },
        });

        setSubmitting(true);

        try {
            const fd = new FormData();
            serverNodes.forEach((server) => {
                if (server.server_node_id) {
                    fd.append("server_node_id[]", server.server_node_id);
                }

                fd.append("server_code[]", server.server_code);
                fd.append("server_type[]", server.server_type);
                fd.append("host[]", server.host);
                fd.append("port[]", String(server.port || 0));
            });
            fd.append("tier_id", tierId);
            const response = await fetch(`/api/tenant/${tenant_id}/server`, {
                method: "PUT",
                body: fd,
            });

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

            if (!response.ok) {
                Swal.fire({
                    icon: "error",
                    title: "Failed",
                    text: data.msg || "Something went wrong",
                });
                return
            }

            Swal.fire({
                icon: "success",
                title: "Success!",
                text: data.msg,
                confirmButtonText: "OK",
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = `/tenants`;
                    }
            });
        } catch (error) {
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Something went wrong",
            });
        } finally {
            setSubmitting(false);
        }
    };
    return (
        <>
        <div className="col-12">
            <div className="card">
                <div className="card-header">
                    <h3 className="card-title">Update Database Tenant / CPO</h3>
                </div>
                <div className="card-body">
                    <form className="space-y" onSubmit={handleSubmit}>
                        <div className="row">
                            <div className="col-12">
                                <p>Tier Tenant / CPO</p>
                                <div className="input-icon">
                                    <select name="tier_id" className="form-select" value={tierId} onChange={(e) => handleTierChange(e.target.value)} disabled={loadingTier}>
                                        <option value="">{loadingTier ? "Loading Tier..." : "Choose Tier"}</option>
                                        {tiers.map((tier) => (
                                            <option key={tier.id} value={tier.id}>
                                                {tier.name}
                                            </option>
                                        ))}
                                    </select>
                                </div>
                            </div>
                        </div>
                        {serverNodes.map((server, index) => (
                            <div className="row" key={server.server_node_id || index}>
                                <p>server_name</p>
                                <div className="col-3">
                                    <div className="input-icon">
                                        <span className="input-icon-addon">
                                            <i className="ti ti-server-2"></i>
                                        </span>
                                        <input
                                            type="text"
                                            name={`server_code_${index}`}
                                            value={server.server_code}
                                            className="form-control"
                                            readOnly={tierCode !== "enterprise"}
                                            placeholder="Server Code"
                                            onChange={(e) => {
                                                const updated = [...serverNodes];
                                                updated[index] = {
                                                    ...updated[index],
                                                    server_code: e.target.value,
                                                };
                                                setServerNodes(updated);
                                            }}
                                        />
                                    </div>
                                </div>
                                <div className="col-3">
                                    <select
                                        name={`server_type_${index}`}
                                        value={server.server_type}
                                        className="form-select"
                                        disabled={tierCode !== "enterprise"}
                                        onChange={(e) => {
                                            const updated = [...serverNodes];

                                            updated[index] = {
                                                ...updated[index],
                                                server_type: e.target.value,
                                            };

                                            setServerNodes(updated);
                                        }}
                                    >
                                        <option value="">Choose Server Type</option>
                                        <option value="docker_host">Docker Host</option>
                                        <option value="bare_metal">Bare Metal</option>
                                        <option value="virtual_machine">
                                            Virtual Machine
                                        </option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                                <div className="col-3">
                                    <div className="input-icon">
                                        <span className="input-icon-addon">
                                            <i className="ti ti-server-2"></i>
                                        </span>
                                        <input
                                            type="text"
                                            name={`host_${index}`}
                                            value={server.host}
                                            className="form-control"
                                            readOnly={tierCode !== "enterprise"}
                                            placeholder="IP Server"
                                            onChange={(e) => {
                                                const updated = [...serverNodes];

                                                updated[index] = {
                                                    ...updated[index],
                                                    host: e.target.value,
                                                };

                                                setServerNodes(updated);
                                            }}
                                        />
                                    </div>
                                </div>
                                <div className="col-3">
                                    <div className="input-icon">
                                        <span className="input-icon-addon">
                                            <i className="ti ti-server-2"></i>
                                        </span>
                                        <input
                                            type="number"
                                            name={`port_${index}`}
                                            value={server.port || ""}
                                            className="form-control"
                                            readOnly={tierCode !== "enterprise"}
                                            placeholder="Port"
                                            onChange={(e) => {
                                                const updated = [...serverNodes];

                                                updated[index] = {
                                                    ...updated[index],
                                                    port: Number(e.target.value),
                                                };

                                                setServerNodes(updated);
                                            }}
                                        />
                                    </div>
                                </div>
                            </div>
                        ))}
                        
                        <div>
                            <div className="row align-items-center">
                                <div className="col"></div>
                                <div className="col-auto">
                                    <button type="submit" disabled={submitting} className="btn btn-primary btn-3">{submitting ? "Assigning..." : "Assign Server to Tenant / CPO"}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </>
    )
}