import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState, useMemo } from "react";
import { CheckCircle, AlertCircle, AlertTriangle, RefreshCw, ChevronRight, } from "lucide-react";
import { cn } from "../../lib/utils";
import { useEditContext } from "../client/editContext";
/**
 * Compact status summary that appears above the settings menu.
 * Shows system status (errors, warnings) with collapsible UI.
 */
export function StatusSummary({ onNavigate, collapsed = false, }) {
    const editContext = useEditContext();
    const [state, setState] = useState("idle");
    const [issues, setIssues] = useState([]);
    const statusChecks = editContext?.configuration?.statusChecks || [];
    const runChecks = async () => {
        if (statusChecks.length === 0) {
            setState("success");
            return;
        }
        setState("loading");
        try {
            const results = await Promise.all(statusChecks.map(async (check) => {
                try {
                    return await check.check();
                }
                catch {
                    return [
                        {
                            id: `${check.id}-error`,
                            title: `${check.name} Check Failed`,
                            description: "An error occurred",
                            severity: "error",
                        },
                    ];
                }
            }));
            setIssues(results.flat());
            setState("success");
        }
        catch {
            setState("error");
        }
    };
    useEffect(() => {
        runChecks();
    }, [statusChecks.length]);
    const { errors, warnings } = useMemo(() => {
        const errors = issues.filter((i) => i.severity === "error");
        const warnings = issues.filter((i) => i.severity === "warning");
        return { errors, warnings };
    }, [issues]);
    const hasIssues = errors.length > 0 || warnings.length > 0;
    // Determine icon and colors based on state
    const getStatusIcon = () => {
        if (state === "loading") {
            return (_jsx(RefreshCw, { className: "h-5 w-5 animate-spin text-gray-500", strokeWidth: 1.5 }));
        }
        if (state === "error") {
            return _jsx(AlertCircle, { className: "h-5 w-5 text-red-500", strokeWidth: 1.5 });
        }
        if (!hasIssues) {
            return (_jsx(CheckCircle, { className: "h-5 w-5 text-green-600", strokeWidth: 1.5 }));
        }
        if (errors.length > 0) {
            return _jsx(AlertCircle, { className: "h-5 w-5 text-red-500", strokeWidth: 1.5 });
        }
        return (_jsx(AlertTriangle, { className: "h-5 w-5 text-amber-500", strokeWidth: 1.5 }));
    };
    const getBgColor = () => {
        if (state === "loading")
            return "bg-gray-100/50 hover:bg-gray-100";
        if (state === "error")
            return "bg-red-50 hover:bg-red-100/70";
        if (!hasIssues)
            return "bg-green-50/50 hover:bg-green-100/50";
        if (errors.length > 0)
            return "bg-red-50 hover:bg-red-100/70";
        return "bg-amber-50 hover:bg-amber-100/70";
    };
    const getTooltip = () => {
        if (state === "loading")
            return "Checking system status...";
        if (state === "error")
            return "Unable to check system status";
        if (!hasIssues)
            return "All systems operational";
        const parts = [];
        if (errors.length > 0)
            parts.push(`${errors.length} error${errors.length !== 1 ? "s" : ""}`);
        if (warnings.length > 0)
            parts.push(`${warnings.length} warning${warnings.length !== 1 ? "s" : ""}`);
        return parts.join(", ") + " detected";
    };
    return (_jsxs("button", { onClick: state !== "loading" ? onNavigate : undefined, className: cn("group flex w-full items-center border-b border-gray-200 transition-all duration-300", getBgColor(), collapsed ? "h-12 justify-center px-0" : "gap-2 px-4 py-3"), title: collapsed ? getTooltip() : undefined, children: [_jsx("span", { className: "shrink-0", children: getStatusIcon() }), _jsxs("span", { className: cn("flex-1 overflow-hidden text-left text-xs transition-all duration-300", collapsed ? "hidden w-0" : "opacity-100", state === "error"
                    ? "text-red-700"
                    : !hasIssues
                        ? "text-green-700"
                        : errors.length > 0
                            ? "text-red-700"
                            : "text-amber-700"), children: [state === "loading" && "Checking system status...", state === "error" && "Unable to check system status", state === "success" && !hasIssues && "All systems operational", state === "success" && hasIssues && (_jsxs(_Fragment, { children: [errors.length > 0 && (_jsxs("span", { className: "font-medium", children: [errors.length, " error", errors.length !== 1 ? "s" : ""] })), errors.length > 0 && warnings.length > 0 && ", ", warnings.length > 0 && (_jsxs("span", { className: errors.length > 0 ? "" : "font-medium", children: [warnings.length, " warning", warnings.length !== 1 ? "s" : ""] })), _jsx("span", { className: "ml-1 font-normal", children: "detected" })] }))] }), !collapsed && state !== "loading" && (_jsx(ChevronRight, { className: cn("h-3 w-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-100", state === "error" || errors.length > 0
                    ? "text-red-500"
                    : !hasIssues
                        ? "text-green-600"
                        : "text-amber-500"), strokeWidth: 1.5 }))] }));
}
//# sourceMappingURL=StatusSummary.js.map