import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, 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 = useMemo(() => editContext?.configuration?.statusChecks || [], [editContext?.configuration?.statusChecks]);
    const runChecks = useCallback(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");
        }
    }, [statusChecks]);
    useEffect(() => {
        runChecks();
    }, [runChecks]);
    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 shape based on state.
    const getStatusIcon = () => {
        if (state === "loading") {
            return (_jsx(RefreshCw, { className: "text-neutral-grey-100 h-5 w-5 animate-spin", strokeWidth: 1 }));
        }
        if (state === "error") {
            return (_jsx(AlertCircle, { className: "text-neutral-grey-100 h-5 w-5", strokeWidth: 1 }));
        }
        if (!hasIssues) {
            return (_jsx(CheckCircle, { className: "text-neutral-grey-100 h-5 w-5", strokeWidth: 1 }));
        }
        if (errors.length > 0) {
            return (_jsx(AlertCircle, { className: "text-neutral-grey-100 h-5 w-5", strokeWidth: 1 }));
        }
        return (_jsx(AlertTriangle, { className: "text-neutral-grey-100 h-5 w-5", strokeWidth: 1 }));
    };
    const getBgColor = () => {
        if (state === "loading")
            return "bg-neutral-grey-5/50 hover:bg-neutral-grey-5";
        if (state === "error")
            return "bg-feedback-red-light hover:bg-feedback-red-light/70";
        if (!hasIssues)
            return "bg-feedback-green-light/50 hover:bg-feedback-green-light/50";
        if (errors.length > 0)
            return "bg-feedback-red-light hover:bg-feedback-red-light/70";
        return "bg-feedback-orange-light hover:bg-feedback-orange-light/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", { type: "button", onClick: onNavigate, className: cn("group border-border-default flex w-full items-center border-b 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("text-neutral-grey-100 flex-1 overflow-hidden text-left text-[13px] transition-all duration-300", collapsed ? "hidden w-0" : "opacity-100"), 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: "text-neutral-grey-100 h-3 w-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-100", strokeWidth: 1 }))] }));
}
//# sourceMappingURL=StatusSummary.js.map