"use client";

import { useEffect, useState } from "react";
import { useUser } from "@/context/UserContext";
import DashboardWidget from "@/components/widget/DashboardWidget";

interface DashboardOverview {
    total_tenant: number
    total_active_tenant: number
    total_charger: number
    total_online_charger: number
    total_active_session: number
    total_active_ticket: number
}

export default function HomeClient() {
    const { user } = useUser();
    const [dashboard, setDashboard] = useState<DashboardOverview | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        const loadMonitoring = async () => {
            setLoading(true);
            setError(null);

            try {
                const response = await fetch("/api/dashboard", {
                    method: "GET",
                    
                });

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

                setDashboard(data.data);
            } catch (err: any) {
                setError(err instanceof Error ? err.message : "Failed to load dashboard overview");
            } finally {
                setLoading(false);
            }
        };

        loadMonitoring();
    }, []);
    if (loading) {
        return (
            <div className="row row-cards">
                <div className="col-12">
                    <div className="card">
                        <div className="card-body text-center py-5">
                            <div className="spinner-border text-primary" role="status"/>
                            <div className="text-secondary mt-3">Loading dashboard overview...</div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="row row-cards">
                <div className="col-12">
                    <div className="alert alert-danger">
                        <div className="d-flex">
                            <i className="ti ti-alert-circle fs-2 me-2" />
                            <div>
                                <h4 className="alert-title">Failed to load dashboard overview</h4>
                                <div className="text-secondary">{error}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
    return (
        <>
        <main id="content" className="page-body">
            <div className="container-xl">
                <div className="row row-deck row-cards">
                    <div className="col-sm-12 col-lg-4">
                        <DashboardWidget title="Total Tenants / CPO" value={dashboard?.total_tenant ?? 0} icon="ti-users" />
                    </div>
                    <div className="col-sm-6 col-lg-4">
                        <DashboardWidget title="Active Tenants / CPO" value={dashboard?.total_active_tenant ?? 0} icon="ti-users"  />
                    </div>
                    <div className="col-sm-6 col-lg-4">
                        <DashboardWidget title="Total Chargers" value={dashboard?.total_charger ?? 0} icon="ti-battery-vertical-charging"  />
                    </div>
                    <div className="col-sm-12 col-lg-4">
                        <DashboardWidget title="Online Chargers" value={dashboard?.total_online_charger ?? 0} icon="ti-battery-vertical-charging"  />
                    </div>
                    <div className="col-sm-6 col-lg-4">
                        <DashboardWidget title="Active Sessions" value={dashboard?.total_active_session ?? 0} icon="ti-bolt"  />
                    </div>
                    <div className="col-sm-6 col-lg-4">
                        <DashboardWidget title="Active Tickets" value={dashboard?.total_active_ticket ?? 0} icon="ti-ticket"  />
                    </div>
                </div>
            </div>
        </main>
        </>
    );
}