'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo } from 'react';
import { analyzeDesign } from '@actuate-media/cms-core/page-builder';
import { CheckCircle2, AlertCircle, XCircle, ChevronDown, ChevronUp, Lightbulb, Palette, } from 'lucide-react';
function getScoreColor(score, max) {
    const ratio = max > 0 ? score / max : 0;
    if (ratio >= 0.8)
        return 'text-success';
    if (ratio >= 0.5)
        return 'text-warning';
    return 'text-destructive';
}
function getBarColor(score, max) {
    const ratio = max > 0 ? score / max : 0;
    if (ratio >= 0.8)
        return 'bg-success';
    if (ratio >= 0.5)
        return 'bg-warning';
    return 'bg-destructive';
}
function getScoreLabel(score) {
    if (score >= 80)
        return 'Excellent';
    if (score >= 65)
        return 'Good';
    if (score >= 50)
        return 'Needs Work';
    return 'Poor';
}
function getRingStrokeColor(score) {
    if (score >= 80)
        return 'rgb(34, 197, 94)';
    if (score >= 50)
        return 'rgb(245, 158, 11)';
    return 'rgb(239, 68, 68)';
}
function StatusIcon({ status }) {
    switch (status) {
        case 'good':
            return _jsx(CheckCircle2, { size: 14, className: "text-success shrink-0" });
        case 'warning':
            return _jsx(AlertCircle, { size: 14, className: "text-warning shrink-0" });
        case 'error':
            return _jsx(XCircle, { size: 14, className: "text-destructive shrink-0" });
    }
}
function SeverityBadge({ severity }) {
    const classes = {
        important: 'bg-destructive/10 text-destructive',
        suggestion: 'bg-warning/10 text-warning',
        info: 'bg-info/10 text-info',
    };
    return (_jsx("span", { className: `inline-block rounded px-1.5 py-0.5 text-xs font-medium ${classes[severity]}`, children: severity }));
}
function ScoreRing({ score }) {
    const radius = 32;
    const strokeWidth = 6;
    const circumference = 2 * Math.PI * radius;
    const progress = Math.min(score, 100) / 100;
    const dashOffset = circumference * (1 - progress);
    const size = (radius + strokeWidth) * 2;
    return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsxs("div", { className: "relative", children: [_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "-rotate-90", children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "var(--border)", strokeWidth: strokeWidth }), _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: getRingStrokeColor(score), strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: dashOffset, strokeLinecap: "round", className: "transition-all duration-700 ease-out" })] }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: `text-lg font-medium ${getScoreColor(score, 100)}`, children: score }) })] }), _jsx("span", { className: "text-muted-foreground text-xs", children: getScoreLabel(score) })] }));
}
function CategoryRow({ category, expanded, onToggle, }) {
    const percentage = category.maxScore > 0 ? (category.score / category.maxScore) * 100 : 0;
    return (_jsxs("div", { className: "border-border border-b last:border-b-0", children: [_jsxs("button", { type: "button", className: "hover:bg-muted/50 flex w-full flex-col gap-2 px-4 py-3 text-left transition-colors", onClick: onToggle, "aria-expanded": expanded, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-foreground text-xs font-medium", children: category.label }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-muted-foreground text-xs", children: [category.score, "/", category.maxScore] }), expanded ? (_jsx(ChevronUp, { size: 14, className: "text-muted-foreground" })) : (_jsx(ChevronDown, { size: 14, className: "text-muted-foreground" }))] })] }), _jsx("div", { className: "bg-muted h-1.5 w-full overflow-hidden rounded-full", children: _jsx("div", { className: `h-full rounded-full transition-all duration-500 ease-out ${getBarColor(category.score, category.maxScore)}`, style: { width: `${percentage}%` } }) })] }), expanded && category.checks.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 px-4 pb-3", children: category.checks.map((check) => (_jsxs("div", { className: "flex items-start gap-2 pl-1", children: [_jsx(StatusIcon, { status: check.status }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-foreground text-xs font-medium", children: check.label }), _jsx("span", { className: "text-muted-foreground text-xs", children: check.detail })] })] }, check.id))) }))] }));
}
function SuggestionsList({ suggestions }) {
    const sorted = useMemo(() => {
        const order = {
            important: 0,
            suggestion: 1,
            info: 2,
        };
        return [...suggestions].sort((a, b) => order[a.severity] - order[b.severity]);
    }, [suggestions]);
    if (sorted.length === 0)
        return null;
    return (_jsxs("div", { className: "border-border border-t px-4 py-3", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx(Lightbulb, { size: 14, className: "text-muted-foreground" }), _jsx("span", { className: "text-foreground text-xs font-medium", children: "Suggestions" })] }), _jsx("div", { className: "flex flex-col gap-2.5", children: sorted.map((suggestion) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(SeverityBadge, { severity: suggestion.severity }), _jsx("span", { className: "text-muted-foreground text-xs leading-relaxed", children: suggestion.message })] }, suggestion.id))) })] }));
}
export function DesignScorePanel({ tree }) {
    const analysis = useMemo(() => analyzeDesign(tree), [tree]);
    const [expandedCategories, setExpandedCategories] = useState([]);
    const toggleCategory = (name) => {
        setExpandedCategories((prev) => prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name]);
    };
    if (!tree.children || tree.children.length === 0) {
        return (_jsxs("div", { className: "flex min-h-[200px] flex-col items-center justify-center p-6 text-center", children: [_jsx(Palette, { size: 32, className: "text-muted-foreground mb-3" }), _jsx("p", { className: "text-foreground mb-1 text-sm font-medium", children: "Design Score" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Add sections to your page to see the design analysis" })] }));
    }
    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "border-border flex flex-col items-center border-b py-5", children: _jsx(ScoreRing, { score: analysis.score }) }), _jsx("div", { className: "flex flex-col", children: analysis.categories.map((category) => (_jsx(CategoryRow, { category: category, expanded: expandedCategories.includes(category.name), onToggle: () => toggleCategory(category.name) }, category.name))) }), _jsx(SuggestionsList, { suggestions: analysis.suggestions })] }));
}
//# sourceMappingURL=DesignScore.js.map