"use client"

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

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

export default function AddTenant() {
    const [tiers, setTiers] = useState<Tier[]>([]);

    const [tierId, setTierId] = useState("");
    const [dbHost, setDbHost] = useState("");
    const [dbPort, setDbPort] = useState("");
    const [dbUsername, setDbUsername] = useState("");
    const [dbPassword, setDbPassword] = useState("");

    const [loadingTier, setLoadingTier] = useState(true);
    const [underTiar, setUnderTiar] = useState(true);

    const [submitting, setSubmitting] = useState(false);
    const [message, setMessage] = useState("");

    const selectedTier = tiers.find((tier) => tier.id === tierId);
    const tierCode = selectedTier?.code?.toLowerCase();

    const handleTierChange = (value: string) => {
        setTierId(value);
        const selected = tiers.find((tier) => tier.id === value);
        const code = selected?.code?.toLowerCase();
        switch (code) {
            case "startup":
                setDbHost("127.0.0.1");
                setDbPort("5432");
                setDbUsername("postgres");
                setDbPassword("andree59");
                break;

            case "professional":
                setDbHost("127.0.0.1");
                setDbPort("5434");
                setDbUsername("postgres");
                setDbPassword("andree159");
                break;

            case "enterprise":
                setDbHost("");
                setDbPort("");
                setDbUsername("");
                setDbPassword("");
                break;

            default:
                setDbHost("");
                setDbPort("");
                setDbUsername("");
                setDbPassword("");
                break;
        }
    };
    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);
        setMessage("");

        try {
            const formData = new FormData(e.currentTarget);

            const payload = {
                tenant_code: formData.get("tenant_code"),
                tenant_name: formData.get("tenant_name"),
                tier_id: formData.get("tier_id"),

                database: {
                    host: dbHost,
                    port: Number(dbPort),
                    username: dbUsername,
                    password: dbPassword,
                },

                under_tiar: underTiar,

                sub_domain: {
                    dashboard: formData.get("dashboard"),
                    monet: formData.get("monet"),
                    webapp: formData.get("webapp"),
                },

                tenant_legal_name: formData.get("tenant_legal_name"),
                tenant_email: formData.get("tenant_email"),
                tenant_phone: formData.get("tenant_phone"),
                tenant_website_url: formData.get("tenant_website_url"),
                tenant_type: formData.get("tenant_type"),

                branding_logo: {
                    dashboard: formData.get("logo_dashboard"),
                    monet: formData.get("logo_monet"),
                    webapp: formData.get("logo_webapp"),
                },

                branding_splash_image_url:
                    formData.get("splash_image_url"),

                branding_color: {
                    primary_color: formData.get("primary_color"),
                    secondary_color: formData.get("secondary_color"),
                    accent_color: formData.get("accent_color"),
                    background_color: formData.get("background_color"),
                    text_color: formData.get("text_color"),
                    success_color: formData.get("success_color"),
                    warning_color: formData.get("warning_color"),
                    danger_color: formData.get("danger_color"),
                },

                smtp: {
                    host: formData.get("smtp_host"),
                    port: Number(formData.get("smtp_port")),
                    username: formData.get("smtp_username"),
                    password: formData.get("smtp_password"),
                },

                organization: {
                    code: formData.get("organization_code"),
                    name: formData.get("organization_name"),
                    active: formData.get("organization_active") === "true",
                },

                admin: {
                    firstname: formData.get("firstname"),
                    lastname: formData.get("lastname"),
                    email: formData.get("admin_email"),
                    phone: formData.get("admin_phone"),
                    active: formData.get("admin_active") === "true",

                    profile: {
                        address: {
                            street_and_number:
                                formData.get("street_and_number"),
                            city: formData.get("city"),
                            postal_code: formData.get("postal_code"),
                            state: formData.get("state"),
                            country: formData.get("country"),
                        },

                        basic_information: {
                            avatar_url: formData.get("avatar_url"),
                            date_of_birth:
                                formData.get("date_of_birth"),
                            place_of_birth:
                                formData.get("place_of_birth"),
                            gender: formData.get("gender"),
                        },
                    },
                },
            };

            const fd = new FormData();
            fd.append("tenant_code", String(payload.tenant_code));
            fd.append("tenant_name", String(payload.tenant_name));
            fd.append("tier_id", String(payload.tier_id));

            fd.append("database", JSON.stringify(payload.database));
            fd.append("under_tiar", String(payload.under_tiar));
            fd.append("sub_domain", JSON.stringify(payload.sub_domain));

            fd.append("tenant_legal_name", String(payload.tenant_legal_name));
            fd.append("tenant_email", String(payload.tenant_email));
            fd.append("tenant_phone", String(payload.tenant_phone));
            fd.append("tenant_website_url", String(payload.tenant_website_url));
            fd.append("tenant_type", String(payload.tenant_type));

            fd.append("branding_logo", JSON.stringify(payload.branding_logo));
            fd.append("branding_splash_image_url", String(payload.branding_splash_image_url));
            fd.append("branding_color", JSON.stringify(payload.branding_color));

            fd.append("smtp", JSON.stringify(payload.smtp));
            fd.append("organization", JSON.stringify(payload.organization));
            fd.append("admin", JSON.stringify(payload.admin));
            
            const response = await fetch("/api/tenant", {
                method: "POST",
                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`;
                    }
            });
            console.log("CREATE TENANT RESPONSE:", data);
        } catch (error) {
            console.error("Create tenant error:", 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">Create New Tenant / CPO</h3>
                </div>
                <div className="card-body">
                    <form className="space-y" onSubmit={handleSubmit}>
                        <div className="row">
                            <p>Basic Information</p>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-code"></i>
                                    </span>
                                    <input type="text" name="tenant_code" className="form-control" placeholder="Tenant Code" />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-user"></i>
                                    </span>
                                    <input type="text" name="tenant_name" className="form-control" placeholder="Tenant Name" />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-user"></i>
                                    </span>
                                    <input type="text" name="tenant_legal_name" className="form-control" placeholder="Tenant Legal Name e.g. PT XYZ" />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-mail"></i>
                                    </span>
                                    <input type="text" name="tenant_email" className="form-control" placeholder="Tenant Email" />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-phone"></i>
                                    </span>
                                    <input type="text" name="tenant_phone" className="form-control" placeholder="Tenant Phone No" />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-link"></i>
                                    </span>
                                    <input type="text" name="tenant_website_url" className="form-control" placeholder="Tenant Website URL" />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <div className="input-icon">
                                    <select name="tenant_type" className="form-select">
                                        <option value="b2c">Business-to-Consumer</option>
                                        <option value="b2b">Business-to-Business</option>
                                    </select>
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <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>
                        <div className="row">
                            <p>Organization Information</p>
                            <div className="col-4">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-user"></i>
                                    </span>
                                    <input type="text" name="organization_code" className="form-control" placeholder="Organization Code" />
                                </div>
                            </div>
                            <div className="col-4">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-user"></i>
                                    </span>
                                    <input type="text" name="organization_name" className="form-control" placeholder="Organization Name" />
                                </div>
                            </div>
                            <div className="col-4">
                                <div className="input-icon">
                                    <select name="organization_active" className="form-select">
                                        <option value="true">Active</option>
                                        <option value="false">Deactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <p>Database</p>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-database"></i>
                                    </span>
                                    <input type="text" name="host" className="form-control" placeholder="Database Host e.g. 192.168.1.1" value={dbHost} onChange={(e) => setDbHost(e.target.value)} disabled={tierCode !== "enterprise"}/>
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-database"></i>
                                    </span>
                                    <input type="text" name="port" className="form-control" placeholder="Database Port e.g. 5432" value={dbPort} onChange={(e) => setDbPort(e.target.value)} disabled={tierCode !== "enterprise"}/>
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-user"></i>
                                    </span>
                                    <input type="text" name="username" className="form-control" placeholder="Database Username" value={dbUsername} onChange={(e) => setDbUsername(e.target.value)} disabled={tierCode !== "enterprise"}/>
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-brand-samsungpass"></i>
                                    </span>
                                    <input type="password" name="password" className="form-control" placeholder="Database Password" value={dbPassword} onChange={(e) => setDbPassword(e.target.value)} disabled={tierCode !== "enterprise"}/>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <p>Domain (Under tiar.ai or no)</p>
                            <div className="col-3">
                                <select name="under_tiar" value={underTiar ? "true" : "false"} onChange={(e) => setUnderTiar(e.target.value === "true")} className="form-select">
                                    <option value="true">YES</option>
                                    <option value="false">NO</option>
                                </select>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-link"></i>
                                    </span>
                                    <input type="text" name="dashboard" className="form-control" placeholder="Dashboard URL" disabled={underTiar} />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-link"></i>
                                    </span>
                                    <input type="text" name="monet" className="form-control" placeholder="Monet URL" disabled={underTiar} />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-link"></i>
                                    </span>
                                    <input type="text" name="webapp" className="form-control" placeholder="Webapp URL" disabled={underTiar} />
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <p>Branding</p>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-database"></i>
                                    </span>
                                    <input type="text" name="logo_dashboard" className="form-control" placeholder="URL Dashboard Logo" />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-database"></i>
                                    </span>
                                    <input type="text" name="logo_monet" className="form-control" placeholder="URL Monet Logo" />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-user"></i>
                                    </span>
                                    <input type="text" name="logo_webapp" className="form-control" placeholder="URL Webpp / Mobile Logo" />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-brand-samsungpass"></i>
                                    </span>
                                    <input type="text" name="splash_image_url" className="form-control" placeholder="URL Splash Sceen Mobile / Webapp" />
                                </div>
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Primary</label>
                                <input type="color" name="primary_color" className="form-control form-control-color" />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Secondary</label>
                                <input type="color" name="secondary_color" className="form-control form-control-color" />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Accent</label>
                                <input type="color" name="accent_color" className="form-control form-control-color" />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Background</label>
                                <input type="color" name="background_color" className="form-control form-control-color" />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Text</label>
                                <input type="color" name="text_color" className="form-control form-control-color" />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Success</label>
                                <input type="color" name="success_color" className="form-control form-control-color" />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Warning</label>
                                <input type="color" name="warning_color" className="form-control form-control-color" />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Danger</label>
                                <input type="color" name="danger_color" className="form-control form-control-color" />
                            </div>
                        </div>
                        <div className="row">
                            <p>SMTP Config</p>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-database"></i>
                                    </span>
                                    <input type="text" name="smtp_host" className="form-control" placeholder="SMTP Host e.g. mail.tiar.ai" />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-database"></i>
                                    </span>
                                    <input type="text" name="smtp_port" className="form-control" placeholder="SMTP Port e.g. 456" />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-mail"></i>
                                    </span>
                                    <input type="text" name="smtp_username" className="form-control" placeholder="SMTP Username" />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-brand-samsungpass"></i>
                                    </span>
                                    <input type="password" name="smtp_password" className="form-control" placeholder="SMTP Password" />
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <p>Admin Account</p>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-user"></i>
                                    </span>
                                    <input type="text" name="firstname" className="form-control" placeholder="Firstname Admin" />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-user"></i>
                                    </span>
                                    <input type="text" name="lastname" className="form-control" placeholder="Lastname Admin" />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-mail"></i>
                                    </span>
                                    <input type="email" name="admin_email" className="form-control" placeholder="Email Admin" />
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-phone"></i>
                                    </span>
                                    <input type="text" name="admin_phone" className="form-control" placeholder="Phone No Admin" />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <select name="admin_active" value={underTiar ? "true" : "false"} onChange={(e) => setUnderTiar(e.target.value === "true")} className="form-select">
                                    <option value="true">Active</option>
                                    <option value="false">Deactive</option>
                                </select>
                            </div>
                            <div className="col-3 mt-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-home"></i>
                                    </span>
                                    <input type="text" name="street_and_number" className="form-control" placeholder="Address" />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-location"></i>
                                    </span>
                                    <input type="text" name="city" className="form-control" placeholder="City" />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-location"></i>
                                    </span>
                                    <input type="text" name="state" className="form-control" placeholder="State" />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-location"></i>
                                    </span>
                                    <input type="text" name="country" className="form-control" placeholder="Country" />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-home"></i>
                                    </span>
                                    <input type="text" name="postal_code" className="form-control" placeholder="Postal Code" />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-link"></i>
                                    </span>
                                    <input type="text" name="avatar_url" className="form-control" placeholder="Avatar URL" />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-calendar"></i>
                                    </span>
                                    <input type="date" name="date_of_birth" className="form-control" placeholder="Date of Birth" />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <div className="input-icon">
                                    <span className="input-icon-addon">
                                        <i className="ti ti-location"></i>
                                    </span>
                                    <input type="text" name="place_of_birth" className="form-control" placeholder="Place of Birth" />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <select name="gender" className="form-select">
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                            </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 ? "Creating..." : "Create New Tenant / CPO"}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </>
    )
}