"use client"

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

interface ListTenantProps {
    onStartMonitoring: (tenantId: string) => void;
}

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

export default function ListTenant({
    onStartMonitoring,
}: ListTenantProps) {
    const [tiers, setTiers] = useState<Tier[]>([]);
    const [loadingTier, setLoadingTier] = useState(true);
    const [selectedTenant, setSelectedTenant] = useState("");

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

                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);
            }
        };

        loadTenant();
    }, []);

    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        if (!selectedTenant) {
            Swal.fire({
                icon: "warning",
                title: "Please choose tenant",
            });
            return;
        }

        onStartMonitoring(selectedTenant);
    };
    return (
        <>
        <div className="card">
            <div className="card-body">
                <form className="space-y" onSubmit={handleSubmit}>
                    <div className="row">
                        <div className="col-12">
                            <div className="input-icon">
                                <p>List Tenant / CPO</p>
                                <select name="tier_id" className="form-select" value={selectedTenant} onChange={(e) => setSelectedTenant(e.target.value)}>
                                    <option value="">{loadingTier ? "Loading Tenant..." : "Choose Tenant"}</option>
                                    {tiers.map((tier) => (
                                        <option key={tier.id} value={tier.id}>
                                            {tier.name}
                                        </option>
                                    ))}
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <div className="row align-items-center">
                            <div className="col-auto">
                                <button type="submit" className="btn btn-outline btn-success">Start Monitoring</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        </>
    )
}