"use client"

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

interface Tenant {
    tenant_code: string;
    tenant_name: string;
    tier_id: string;
    database: Database;
    under_tiar: boolean;
    sub_domain: SubDomain;
    tenant_legal_name: string;
    tenant_email: string;
    tenant_phone: string;
    tenant_website_url: string;
    tenant_type: string;
    branding_logo: BrandingLogo;
    branding_splash_image_url: string;
    branding_color: BrandingColor;
    smtp: Smtp;
}

interface Database {
    host: string;
    port: string;
    username: string;
    password: string;
}

interface SubDomain {
    dashboard: string;
    monet: string;
    webapp: string;
}

interface BrandingLogo {
    dashboard: string;
    monet: string;
    webapp: string;
}

interface BrandingColor {
    primary_color: string;
    secondary_color: string;
    accent_color: string;
    background_color: string;
    text_color: string;
    success_color: string;
    warning_color: string;
    danger_color: string;
}

interface Smtp {
    host: string;
    port: string;
    username: string;
    password: string;
}

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

export default function ReadTenant({
    tenant_id
}:{
    tenant_id: string;
}) {
    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 [tenant, setTenant] = useState<Tenant | null>(null);
    const [loadingTenant, setLoadingTenant] = useState(true);

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

    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();
    }, []);

    useEffect(() => {
        const loadTenant = async () => {
            try {
                setLoadingTenant(true);
                const response = await fetch(`/api/tenant/${tenant_id}`, {
                    method: "GET",
                    cache: "no-store",
                });

                const result = await response.json();

                if (!response.ok) {
                    throw new Error(
                        result.message || "Failed to fetch tenant"
                    );
                }

                const data: Tenant = result.data;

                setTenant(data);

                // Basic information
                setTierId(data.tier_id);

                // Database
                setDbHost(data.database?.host ?? "");
                setDbPort(data.database?.port ?? "");
                setDbUsername(data.database?.username ?? "");
                setDbPassword(data.database?.password ?? "");

                // Domain
                setUnderTiar(data.under_tiar ?? true);

            } catch (error) {
                console.error("Failed to load tenant:", error);

                Swal.fire({
                    icon: "error",
                    title: "Failed",
                    text:
                        error instanceof Error
                            ? error.message
                            : "Failed to load tenant",
                });
            } finally {
                setLoadingTenant(false);
            }
        };

        if (tenant_id) {
            loadTenant();
        }
    }, [tenant_id]);
    return (
        <>
        <div className="col-12">
            <div className="card">
                <div className="card-header">
                    <h3 className="card-title">View Tenant / CPO</h3>
                </div>
                <div className="card-body">
                    <form className="space-y">
                        <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" className="form-control" value={tenant?.tenant_code ?? ""} disabled/>
                                </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" className="form-control" value={tenant?.tenant_name ?? ""} disabled/>
                                </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" className="form-control" value={tenant?.tenant_legal_name ?? ""} disabled />
                                </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" className="form-control" value={tenant?.tenant_email ?? ""} disabled  />
                                </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" className="form-control" value={tenant?.tenant_phone ?? ""} disabled />
                                </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" className="form-control" value={tenant?.tenant_website_url ?? ""} disabled />
                                </div>
                            </div>
                            <div className="col-3 mt-3">
                                <div className="input-icon">
                                    <select name="tenant_type" className="form-select" disabled>
                                        <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} disabled>
                                        <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>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" className="form-control" value={tenant?.database.host ?? ""} disabled />
                                </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" className="form-control"  value={tenant?.database.port ?? ""} disabled />
                                </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" className="form-control"  value={tenant?.database.username ?? ""} disabled />
                                </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" className="form-control"  value={tenant?.database.password ?? ""} disabled />
                                </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")} disabled 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" className="form-control" value={tenant?.sub_domain.dashboard ?? ""} disabled />
                                </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" className="form-control" value={tenant?.sub_domain.monet ?? ""} disabled />
                                </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" className="form-control" value={tenant?.sub_domain.webapp ?? ""} disabled />
                                </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-link"></i>
                                    </span>
                                    <input type="text" className="form-control" value={tenant?.branding_logo.dashboard ?? ""} disabled />
                                </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" className="form-control" value={tenant?.branding_logo.monet ?? ""} disabled />
                                </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" className="form-control" value={tenant?.branding_logo.webapp ?? ""} disabled />
                                </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" className="form-control" value={tenant?.branding_splash_image_url ?? ""} disabled />
                                </div>
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Primary</label>
                                <input type="color" className="form-control form-control-color" value={tenant?.branding_color.primary_color ?? ""} disabled/>
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Secondary</label>
                                <input type="color" className="form-control form-control-color" value={tenant?.branding_color.secondary_color ?? ""} disabled />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Accent</label>
                                <input type="color" className="form-control form-control-color" value={tenant?.branding_color.accent_color ?? ""} disabled />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Background</label>
                                <input type="color" className="form-control form-control-color" value={tenant?.branding_color.background_color ?? ""} disabled />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Text</label>
                                <input type="color" className="form-control form-control-color" value={tenant?.branding_color.text_color ?? ""} disabled />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Success</label>
                                <input type="color" className="form-control form-control-color" value={tenant?.branding_color.success_color ?? ""} disabled />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Warning</label>
                                <input type="color" className="form-control form-control-color" value={tenant?.branding_color.warning_color ?? ""} disabled />
                            </div>
                            <div className="col-1 mt-3">
                                <label className="form-label">Danger</label>
                                <input type="color" className="form-control form-control-color" value={tenant?.branding_color.danger_color ?? ""} disabled />
                            </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" className="form-control" value={tenant?.smtp.host ?? ""} disabled />
                                </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" className="form-control" value={tenant?.smtp.port ?? ""} disabled />
                                </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" className="form-control" value={tenant?.smtp.username ?? ""} disabled />
                                </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" className="form-control" value={tenant?.smtp.password ?? ""} disabled />
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </>
    )
}