"use client";

import { useEffect, useState } from "react";
import DistributionChargeWidget from "@/components/widget/DistributionChargeWidget"
import ChargerTable from "@/components/table/ChargerTable"
import MessagesWidget from "@/components/widget/MessagesWidget"
import Swal from "sweetalert2";

interface MonitoringCharger {
    name: string
    legal_name: string
    tier: string
    join_date: string
    charger: number
    user: number
    member: string
    messaging: string
    distribution: Distribution
    charger_status: ChargerStatus[]
    messages: number[]
}

interface Distribution {
    available: number
    charging: number
    preparing: number
    finishing: number
    fault: number
    offline: number
}

interface ChargerStatus {
    token: string
    charger_id: string
    name: string
    location: string
    status: string
    nozzle: number
    heart_beat: string
    firmaware: string
}

interface ChargerMonitoringProps {
    tenantId: string;
    monitoringKey: number;
}

export default function ChargerMonitoring({
    tenantId,
    monitoringKey
}: ChargerMonitoringProps) {
    const [monitoring, setMonitoring] = useState<MonitoringCharger | null>(null);

    useEffect(() => {
        if (!tenantId) return;

        const loadMonitoring = async () => {
            Swal.fire({
                title: "Checking Data Tenant / CPO...",
                text: "Please wait",
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading(),
            });

            try {
                const fd = new FormData();
                fd.append("tenant_id", tenantId);

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

                const data = await response.json();

                if (!response.ok) {
                    throw new Error(data.msg || "Something went wrong");
                }

                setMonitoring(data.data);
            } catch (err: any) {
                Swal.fire({
                    icon: "error",
                    title: "Failed",
                    text: err.message,
                });
            } finally {
                Swal.close();
            }
        };

        loadMonitoring();
    }, [tenantId, monitoringKey]);
    return (
        <>
        <div className="row row-cards">
            <DistributionChargeWidget monitoring={monitoring}/>
        </div>
        <div className="row row-cards mt-1">
            <div className="col-12">
                <MessagesWidget messages={monitoring?.messages ?? []}/>
            </div>
            <div className="col-12">
                <ChargerTable charger={monitoring?.charger_status ?? []} tenant_id={tenantId} />
            </div>
        </div>
        </>
    );
}