import { useEffect, useState } from "react";
import api from "../Api";
import { ServerTypeLabels, type ServersType } from "../types/enums";

interface ServerCount {
    type: ServersType;
    total: number;
}

export const ServerCardMetrics = () => {
    const [counts, setCounts] = useState<ServerCount[]>([]);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        const fetchCounts = async () => {
            try {
                const { data } = await api.get<Record<ServersType, number>>("/api/servers/type");
                const normalized = Object.entries(data).map(([type, total]) => ({
                    type: type as ServersType,
                    total,
                }));
                setCounts(normalized);
            } catch (err: any) {
                const message = err?.response?.data?.message || "Falha ao carregar o total de servidores.";
                setError(message);
            }
        };

        fetchCounts();
    }, []);

    if (error) {
        return <div className={Styles.error}>{error}</div>;
    }

    if (counts.length === 0) {
        return <div className={Styles.placeholder}>Carregando métricas...</div>;
    }

    return (
        <div className={Styles.grid}>
            {counts.map(({ type, total }) => (
                <div key={type} className={Styles.card}>
                    <p className={Styles.label}>{ServerTypeLabels[type]}</p>
                    <p className={Styles.value}>{total}</p>
                </div>
            ))}
        </div>
    );
};

const Styles = {
    grid: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
    card: "rounded-lg border border-cardBorder bg-card p-4 shadow-sm space-y-1",
    label: "text-sm text-text-secondary uppercase tracking-wide",
    value: "text-3xl font-semibold text-text",
    placeholder: "p-4 rounded-lg border border-cardBorder bg-card text-text-secondary text-sm",
    error: "p-4 rounded-lg border border-red-200 bg-red-50 text-red-600 text-sm",
};