'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo } from 'react';
import { analyzeSEO } from '@actuate-media/cms-core/page-builder';
import { CheckCircle2, AlertCircle, XCircle, ChevronDown, ChevronUp, Search, Globe, Type, FileText, Clock, BarChart3, Target, Eye, } from 'lucide-react';
function getScoreColor(score) {
    if (score >= 70)
        return 'text-success';
    if (score >= 40)
        return 'text-warning';
    return 'text-destructive';
}
function getRingStrokeColor(score) {
    if (score >= 70)
        return 'rgb(34, 197, 94)';
    if (score >= 40)
        return 'rgb(245, 158, 11)';
    return 'rgb(239, 68, 68)';
}
function getScoreLabel(score) {
    if (score >= 80)
        return 'Excellent';
    if (score >= 70)
        return 'Good';
    if (score >= 50)
        return 'Needs Work';
    return 'Poor';
}
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 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: "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)}`, children: score }) })] }));
}
function ScoreSummary({ checks }) {
    const passed = checks.filter((c) => c.status === 'good').length;
    const warnings = checks.filter((c) => c.status === 'warning').length;
    const errors = checks.filter((c) => c.status === 'error').length;
    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(CheckCircle2, { size: 12, className: "text-success" }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [passed, " passed"] })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(AlertCircle, { size: 12, className: "text-warning" }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [warnings, " warnings"] })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(XCircle, { size: 12, className: "text-destructive" }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [errors, " issues"] })] })] }));
}
function CollapsibleSection({ title, icon: Icon, expanded, onToggle, children, }) {
    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 items-center justify-between px-4 py-3 text-left transition-colors", onClick: onToggle, "aria-expanded": expanded, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { size: 14, className: "text-muted-foreground" }), _jsx("span", { className: "text-foreground text-xs font-medium", children: title })] }), expanded ? (_jsx(ChevronUp, { size: 14, className: "text-muted-foreground" })) : (_jsx(ChevronDown, { size: 14, className: "text-muted-foreground" }))] }), expanded && _jsx("div", { className: "px-4 pb-4", children: children })] }));
}
function SEOChecksList({ checks }) {
    return (_jsx("div", { className: "flex flex-col gap-2", children: checks.map((check) => (_jsxs("div", { className: "flex items-start gap-2", 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 ReadabilityGrid({ readability }) {
    const fleschLabel = readability.fleschScore >= 60
        ? 'Easy'
        : readability.fleschScore >= 30
            ? 'Moderate'
            : 'Difficult';
    return (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "bg-muted/50 flex flex-col gap-1 rounded-md p-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(BarChart3, { size: 12, className: "text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Flesch Score" })] }), _jsx("span", { className: `text-sm font-medium ${getScoreColor(readability.fleschScore)}`, children: readability.fleschScore }), _jsx("span", { className: "text-muted-foreground text-xs", children: fleschLabel })] }), _jsxs("div", { className: "bg-muted/50 flex flex-col gap-1 rounded-md p-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Type, { size: 12, className: "text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Word Count" })] }), _jsx("span", { className: "text-foreground text-sm font-medium", children: readability.wordCount }), _jsx("span", { className: "text-muted-foreground text-xs", children: readability.wordCount >= 300 ? 'Good length' : 'Short' })] }), _jsxs("div", { className: "bg-muted/50 flex flex-col gap-1 rounded-md p-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(FileText, { size: 12, className: "text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Avg Sentence" })] }), _jsxs("span", { className: "text-foreground text-sm font-medium", children: [readability.avgSentenceLength, " words"] }), _jsx("span", { className: "text-muted-foreground text-xs", children: readability.avgSentenceLength <= 20 ? 'Good' : 'Long' })] }), _jsxs("div", { className: "bg-muted/50 flex flex-col gap-1 rounded-md p-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Clock, { size: 12, className: "text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Reading Time" })] }), _jsxs("span", { className: "text-foreground text-sm font-medium", children: [readability.readingTime, " min"] }), _jsxs("span", { className: "text-muted-foreground text-xs", children: ["~", readability.wordCount, " words"] })] })] }));
}
function PerBlockHints({ hints }) {
    return (_jsx("div", { className: "flex flex-col gap-2", children: hints.map((hint, index) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(StatusIcon, { status: hint.status }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-foreground text-xs font-medium", children: hint.label }), _jsx("span", { className: "text-muted-foreground text-xs", children: hint.detail })] })] }, `${hint.id}-${index}`))) }));
}
function BasicSEOFields({ pageSettings, onPageSettingsChange, }) {
    const metaTitleLength = (pageSettings.metaTitle || '').length;
    const metaDescLength = (pageSettings.metaDescription || '').length;
    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-foreground text-xs font-medium", children: "Meta Title" }), _jsxs("span", { className: `text-xs ${metaTitleLength > 60 ? 'text-destructive' : metaTitleLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`, children: [metaTitleLength, "/60"] })] }), _jsx("input", { type: "text", value: pageSettings.metaTitle || '', onChange: (e) => onPageSettingsChange({ metaTitle: e.target.value }), placeholder: "Page title for search engines", className: "bg-input-background border-border text-foreground placeholder:text-muted-foreground focus:ring-primary w-full rounded-md border px-3 py-2 text-sm focus:ring-1 focus:outline-none" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-foreground text-xs font-medium", children: "Meta Description" }), _jsxs("span", { className: `text-xs ${metaDescLength > 160 ? 'text-destructive' : metaDescLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`, children: [metaDescLength, "/160"] })] }), _jsx("textarea", { value: pageSettings.metaDescription || '', onChange: (e) => onPageSettingsChange({ metaDescription: e.target.value }), placeholder: "Brief description of the page content", rows: 3, className: "bg-input-background border-border text-foreground placeholder:text-muted-foreground focus:ring-primary w-full resize-none rounded-md border px-3 py-2 text-sm focus:ring-1 focus:outline-none" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { className: "text-foreground text-xs font-medium", children: "Focus Keyphrase" }), _jsx("input", { type: "text", value: pageSettings.focusKeyphrase || '', onChange: (e) => onPageSettingsChange({ focusKeyphrase: e.target.value }), placeholder: "Primary keyword or phrase", className: "bg-input-background border-border text-foreground placeholder:text-muted-foreground focus:ring-primary w-full rounded-md border px-3 py-2 text-sm focus:ring-1 focus:outline-none" })] })] }));
}
function SearchPreview({ pageSettings }) {
    const title = pageSettings.metaTitle || pageSettings.title || 'Untitled Page';
    const description = pageSettings.metaDescription || 'No description set';
    const slug = pageSettings.slug || 'page';
    return (_jsxs("div", { className: "bg-background border-border rounded-md border p-4", children: [_jsx("p", { className: "text-muted-foreground mb-2 text-xs", children: "Google Search Preview" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-primary truncate text-sm", children: title }), _jsxs("p", { className: "text-success truncate text-xs", children: ["example.com/", slug] }), _jsx("p", { className: "text-muted-foreground line-clamp-2 text-xs", children: description })] })] }));
}
function SocialPreview({ pageSettings }) {
    const title = pageSettings.metaTitle || pageSettings.title || 'Untitled Page';
    const description = pageSettings.metaDescription || 'No description set';
    return (_jsxs("div", { className: "bg-background border-border overflow-hidden rounded-md border", children: [_jsx("p", { className: "text-muted-foreground px-4 pt-3 pb-2 text-xs", children: "Open Graph Preview" }), pageSettings.ogImage && (_jsx("div", { className: "bg-muted flex h-32 w-full items-center justify-center overflow-hidden", children: _jsx("img", { src: pageSettings.ogImage, alt: "OG preview", className: "h-full w-full object-cover" }) })), !pageSettings.ogImage && (_jsx("div", { className: "bg-muted flex h-32 w-full items-center justify-center", children: _jsx(Globe, { size: 24, className: "text-muted-foreground" }) })), _jsxs("div", { className: "flex flex-col gap-1 p-3", children: [_jsx("p", { className: "text-muted-foreground text-xs uppercase", children: "example.com" }), _jsx("p", { className: "text-foreground truncate text-sm font-medium", children: title }), _jsx("p", { className: "text-muted-foreground line-clamp-2 text-xs", children: description })] })] }));
}
export function BuilderSEOPanel({ tree, pageSettings, onPageSettingsChange, selectedNodeId, }) {
    const analysis = useMemo(() => analyzeSEO(tree, pageSettings), [tree, pageSettings]);
    const [expandedSections, setExpandedSections] = useState(['checks']);
    const toggleSection = (section) => {
        setExpandedSections((prev) => prev.includes(section) ? prev.filter((s) => s !== section) : [...prev, section]);
    };
    const blockHints = useMemo(() => {
        if (!selectedNodeId)
            return [];
        return analysis.perBlockHints.get(selectedNodeId) || [];
    }, [analysis.perBlockHints, selectedNodeId]);
    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(Search, { size: 32, className: "text-muted-foreground mb-3" }), _jsx("p", { className: "text-foreground mb-1 text-sm font-medium", children: "SEO Analysis" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Add content to your page to see SEO analysis" })] }));
    }
    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "border-border flex items-center gap-4 border-b px-4 py-5", children: [_jsx(ScoreRing, { score: analysis.score }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-foreground text-xs font-medium", children: getScoreLabel(analysis.score) }), _jsx(ScoreSummary, { checks: analysis.checks })] })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx(CollapsibleSection, { title: "SEO Checks", icon: Search, expanded: expandedSections.includes('checks'), onToggle: () => toggleSection('checks'), children: _jsx(SEOChecksList, { checks: analysis.checks }) }), _jsx(CollapsibleSection, { title: "Readability", icon: BarChart3, expanded: expandedSections.includes('readability'), onToggle: () => toggleSection('readability'), children: _jsx(ReadabilityGrid, { readability: analysis.readability }) }), blockHints.length > 0 && (_jsx(CollapsibleSection, { title: "Block Hints", icon: Target, expanded: expandedSections.includes('blockHints'), onToggle: () => toggleSection('blockHints'), children: _jsx(PerBlockHints, { hints: blockHints }) })), _jsx(CollapsibleSection, { title: "Basic SEO", icon: FileText, expanded: expandedSections.includes('basicSeo'), onToggle: () => toggleSection('basicSeo'), children: _jsx(BasicSEOFields, { pageSettings: pageSettings, onPageSettingsChange: onPageSettingsChange }) }), _jsx(CollapsibleSection, { title: "Search Preview", icon: Eye, expanded: expandedSections.includes('searchPreview'), onToggle: () => toggleSection('searchPreview'), children: _jsx(SearchPreview, { pageSettings: pageSettings }) }), _jsx(CollapsibleSection, { title: "Social Preview", icon: Globe, expanded: expandedSections.includes('socialPreview'), onToggle: () => toggleSection('socialPreview'), children: _jsx(SocialPreview, { pageSettings: pageSettings }) })] })] }));
}
//# sourceMappingURL=SEOPanel.js.map