'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as Select from '@radix-ui/react-select';
import { adminPortalContainer } from '../lib/portal-container.js';
import { useState, useMemo } from 'react';
import { Search, RefreshCw, EyeOff, Check, ChevronDown, ChevronUp, Globe, Share2, Settings2, Target, BookOpen, CheckCircle2, AlertCircle, XCircle, BarChart3, Star, } from 'lucide-react';
const ROBOTS_POLICY_OPTIONS = [
    { value: 'inherit', label: 'Inherit site default' },
    { value: 'index-follow', label: 'Force index, follow' },
    { value: 'noindex-follow', label: 'Force noindex, follow' },
    { value: 'index-nofollow', label: 'Force index, nofollow' },
    { value: 'noindex-nofollow', label: 'Force noindex, nofollow' },
];
function getRobotsPolicy(seoData) {
    if (seoData.robotsPolicy)
        return seoData.robotsPolicy;
    if (typeof seoData.noIndex === 'boolean' || typeof seoData.noFollow === 'boolean') {
        const noIndex = seoData.noIndex === true;
        const noFollow = seoData.noFollow === true;
        if (noIndex && noFollow)
            return 'noindex-nofollow';
        if (noIndex)
            return 'noindex-follow';
        if (noFollow)
            return 'index-nofollow';
        return 'index-follow';
    }
    return 'inherit';
}
function robotsPolicyToBooleans(policy) {
    switch (policy) {
        case 'index-follow':
            return { noIndex: false, noFollow: false };
        case 'noindex-follow':
            return { noIndex: true, noFollow: false };
        case 'index-nofollow':
            return { noIndex: false, noFollow: true };
        case 'noindex-nofollow':
            return { noIndex: true, noFollow: true };
        default:
            return { noIndex: undefined, noFollow: undefined };
    }
}
const SCHEMA_TYPES = [
    'Article',
    'BlogPosting',
    'WebPage',
    'FAQPage',
    'Product',
    'Event',
    'LocalBusiness',
    'HowTo',
    'Recipe',
];
function stripHtml(html) {
    return html
        .replace(/<[^>]*>/g, ' ')
        .replace(/\s+/g, ' ')
        .trim();
}
function countWords(text) {
    if (!text.trim())
        return 0;
    return text.trim().split(/\s+/).length;
}
function countSentences(text) {
    if (!text.trim())
        return 0;
    const matches = text.match(/[.!?]+/g);
    return matches ? matches.length : 1;
}
function countSyllables(word) {
    const w = word.toLowerCase().replace(/[^a-z]/g, '');
    if (w.length <= 3)
        return 1;
    let count = 0;
    const vowels = 'aeiouy';
    let prevVowel = false;
    for (let i = 0; i < w.length; i++) {
        const isVowel = vowels.includes(w[i] ?? '');
        if (isVowel && !prevVowel)
            count++;
        prevVowel = isVowel;
    }
    if (w.endsWith('e') && count > 1)
        count--;
    return Math.max(count, 1);
}
function analyzeReadability(text) {
    const plainText = stripHtml(text);
    const wordCount = countWords(plainText);
    const sentenceCount = countSentences(plainText);
    const avgSentenceLength = sentenceCount > 0 ? wordCount / sentenceCount : 0;
    const readingTime = Math.max(1, Math.ceil(wordCount / 200));
    let fleschScore = 0;
    if (wordCount > 0 && sentenceCount > 0) {
        const words = plainText.split(/\s+/);
        const totalSyllables = words.reduce((sum, w) => sum + countSyllables(w), 0);
        fleschScore = Math.round(206.835 - 1.015 * (wordCount / sentenceCount) - 84.6 * (totalSyllables / wordCount));
        fleschScore = Math.max(0, Math.min(100, fleschScore));
    }
    const passivePatterns = /\b(is|are|was|were|been|being|be)\s+\w+ed\b/gi;
    const passiveMatches = plainText.match(passivePatterns);
    const passiveEstimate = passiveMatches
        ? Math.round((passiveMatches.length / Math.max(sentenceCount, 1)) * 100)
        : 0;
    return { fleschScore, avgSentenceLength, wordCount, readingTime, passiveEstimate };
}
function runSEOChecks(seoData, title, slug, content) {
    const checks = [];
    const plainText = stripHtml(content);
    const wordCount = countWords(plainText);
    const keyphrase = (seoData.focusKeyphrase ?? '').toLowerCase().trim();
    const metaTitle = seoData.metaTitle ?? '';
    const metaDesc = seoData.metaDescription ?? '';
    // Meta title length
    if (!metaTitle) {
        checks.push({
            id: 'title-missing',
            label: 'Meta title',
            status: 'bad',
            detail: 'No meta title set',
        });
    }
    else if (metaTitle.length >= 30 && metaTitle.length <= 60) {
        checks.push({
            id: 'title-length',
            label: 'Meta title length',
            status: 'good',
            detail: `${metaTitle.length} chars (ideal: 30-60)`,
        });
    }
    else if (metaTitle.length > 60) {
        checks.push({
            id: 'title-length',
            label: 'Meta title length',
            status: 'ok',
            detail: `${metaTitle.length} chars — too long, may be truncated`,
        });
    }
    else {
        checks.push({
            id: 'title-length',
            label: 'Meta title length',
            status: 'ok',
            detail: `${metaTitle.length} chars — quite short`,
        });
    }
    // Meta description length
    if (!metaDesc) {
        checks.push({
            id: 'desc-missing',
            label: 'Meta description',
            status: 'bad',
            detail: 'No meta description set',
        });
    }
    else if (metaDesc.length >= 120 && metaDesc.length <= 160) {
        checks.push({
            id: 'desc-length',
            label: 'Meta description length',
            status: 'good',
            detail: `${metaDesc.length} chars (ideal: 120-160)`,
        });
    }
    else if (metaDesc.length > 160) {
        checks.push({
            id: 'desc-length',
            label: 'Meta description length',
            status: 'ok',
            detail: `${metaDesc.length} chars — may be truncated`,
        });
    }
    else {
        checks.push({
            id: 'desc-length',
            label: 'Meta description length',
            status: 'ok',
            detail: `${metaDesc.length} chars — could be longer`,
        });
    }
    // Content length
    if (wordCount >= 300) {
        checks.push({
            id: 'content-length',
            label: 'Content length',
            status: 'good',
            detail: `${wordCount} words`,
        });
    }
    else if (wordCount >= 150) {
        checks.push({
            id: 'content-length',
            label: 'Content length',
            status: 'ok',
            detail: `${wordCount} words — aim for 300+`,
        });
    }
    else {
        checks.push({
            id: 'content-length',
            label: 'Content length',
            status: 'bad',
            detail: `${wordCount} words — too short`,
        });
    }
    // Focus keyphrase checks
    if (!keyphrase) {
        checks.push({
            id: 'keyphrase-missing',
            label: 'Focus keyphrase',
            status: 'bad',
            detail: 'No focus keyphrase set',
        });
    }
    else {
        const inTitle = metaTitle.toLowerCase().includes(keyphrase);
        checks.push({
            id: 'keyphrase-title',
            label: 'Keyphrase in title',
            status: inTitle ? 'good' : 'bad',
            detail: inTitle ? 'Found in meta title' : 'Not found in meta title',
        });
        const inDesc = metaDesc.toLowerCase().includes(keyphrase);
        checks.push({
            id: 'keyphrase-desc',
            label: 'Keyphrase in description',
            status: inDesc ? 'good' : 'ok',
            detail: inDesc ? 'Found in meta description' : 'Not found in meta description',
        });
        const inSlug = slug.toLowerCase().includes(keyphrase.replace(/\s+/g, '-'));
        checks.push({
            id: 'keyphrase-slug',
            label: 'Keyphrase in slug',
            status: inSlug ? 'good' : 'ok',
            detail: inSlug ? 'Found in URL slug' : 'Not found in URL slug',
        });
        const firstParagraph = plainText.slice(0, 300).toLowerCase();
        const inIntro = firstParagraph.includes(keyphrase);
        checks.push({
            id: 'keyphrase-intro',
            label: 'Keyphrase in introduction',
            status: inIntro ? 'good' : 'ok',
            detail: inIntro ? 'Found in first paragraph' : 'Not found in first paragraph',
        });
        if (wordCount > 0) {
            const kpWords = keyphrase.split(/\s+/).length;
            const regex = new RegExp(keyphrase.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
            const matches = plainText.match(regex);
            const occurrences = matches ? matches.length : 0;
            const density = ((occurrences * kpWords) / wordCount) * 100;
            const densityOk = density >= 0.5 && density <= 3;
            checks.push({
                id: 'keyphrase-density',
                label: 'Keyphrase density',
                status: densityOk ? 'good' : density === 0 ? 'bad' : 'ok',
                detail: `${density.toFixed(1)}% (aim for 0.5-3%)`,
            });
        }
    }
    // Image alt text
    const imgTags = content.match(/<img[^>]*>/gi) ?? [];
    if (imgTags.length > 0) {
        const withoutAlt = imgTags.filter((tag) => !tag.match(/alt\s*=\s*["'][^"']+["']/i));
        if (withoutAlt.length === 0) {
            checks.push({
                id: 'img-alt',
                label: 'Image alt text',
                status: 'good',
                detail: 'All images have alt text',
            });
        }
        else {
            checks.push({
                id: 'img-alt',
                label: 'Image alt text',
                status: 'ok',
                detail: `${withoutAlt.length} image(s) missing alt text`,
            });
        }
    }
    // OG checks
    const hasOgTitle = !!(seoData.ogTitle || metaTitle);
    const hasOgDesc = !!(seoData.ogDescription || metaDesc);
    const hasOgImage = !!seoData.ogImage;
    checks.push({
        id: 'og-title',
        label: 'Social title',
        status: hasOgTitle ? 'good' : 'ok',
        detail: hasOgTitle ? 'Set' : 'Missing — will fall back to page title',
    });
    checks.push({
        id: 'og-desc',
        label: 'Social description',
        status: hasOgDesc ? 'good' : 'ok',
        detail: hasOgDesc ? 'Set' : 'Missing — will fall back to meta description',
    });
    checks.push({
        id: 'og-image',
        label: 'Social image',
        status: hasOgImage ? 'good' : 'bad',
        detail: hasOgImage ? 'Set' : 'No OG image set — strongly recommended',
    });
    return checks;
}
function computeOverallScore(checks) {
    if (checks.length === 0)
        return 0;
    const scoreMap = { good: 100, ok: 50, bad: 0 };
    const total = checks.reduce((sum, c) => sum + scoreMap[c.status], 0);
    return Math.round(total / checks.length);
}
function StatusDot({ status }) {
    if (status === 'good')
        return _jsx(CheckCircle2, { className: "text-success h-4 w-4 shrink-0" });
    if (status === 'ok')
        return _jsx(AlertCircle, { className: "text-warning h-4 w-4 shrink-0" });
    return _jsx(XCircle, { className: "text-destructive h-4 w-4 shrink-0" });
}
function ScoreRing({ score }) {
    const radius = 28;
    const circumference = 2 * Math.PI * radius;
    const offset = circumference - (score / 100) * circumference;
    const color = score >= 70 ? '#22c55e' : score >= 40 ? '#f59e0b' : '#ef4444';
    return (_jsxs("div", { className: "relative inline-flex items-center justify-center", children: [_jsxs("svg", { width: "72", height: "72", className: "-rotate-90", children: [_jsx("circle", { cx: "36", cy: "36", r: radius, fill: "none", stroke: "var(--border)", strokeWidth: "5" }), _jsx("circle", { cx: "36", cy: "36", r: radius, fill: "none", stroke: color, strokeWidth: "5", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", className: "transition-all duration-500" })] }), _jsx("span", { className: "absolute text-sm font-medium", style: { color }, children: score })] }));
}
function Section({ id, title, icon, expanded, onToggle, children, badge, }) {
    return (_jsxs("div", { className: "overflow-hidden rounded-lg border border-[var(--border)]", children: [_jsxs("button", { onClick: () => onToggle(id), className: "flex w-full items-center justify-between px-4 py-2.5 text-left text-sm font-medium text-[var(--foreground)] transition-colors hover:bg-[var(--muted)]", children: [_jsxs("span", { className: "flex items-center gap-2", children: [icon, title, badge] }), expanded ? (_jsx(ChevronUp, { className: "h-4 w-4 text-[var(--muted-foreground)]" })) : (_jsx(ChevronDown, { className: "h-4 w-4 text-[var(--muted-foreground)]" }))] }), expanded && _jsx("div", { className: "px-4 pt-1 pb-4", children: children })] }));
}
function ToggleSwitch({ label, description, checked, onChange, }) {
    return (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("label", { className: "text-sm font-medium text-[var(--foreground)]", children: label }), _jsx("p", { className: "mt-0.5 text-xs text-[var(--muted-foreground)]", children: description })] }), _jsx("button", { type: "button", role: "switch", "aria-checked": checked, onClick: () => onChange(!checked), className: `relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors ${checked ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'}`, children: _jsx("span", { className: `bg-card pointer-events-none mt-0.5 block h-5 w-5 rounded-full shadow-sm transition-transform ${checked ? 'translate-x-[22px]' : 'translate-x-0.5'}` }) })] }));
}
function InputField({ label, value, onChange, placeholder, type = 'text', charCount, charTarget, }) {
    return (_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-xs font-medium text-[var(--muted-foreground)]", children: label }), _jsx("input", { type: type, value: value, onChange: (e) => onChange(e.target.value), className: "w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:ring-2 focus:ring-[var(--primary)] focus:outline-none", placeholder: placeholder }), charCount !== undefined && charTarget && (_jsxs("p", { className: "mt-1 text-xs text-[var(--muted-foreground)]", children: [charCount, " chars ", charTarget] }))] }));
}
function TextareaField({ label, value, onChange, placeholder, rows = 3, charCount, charTarget, }) {
    return (_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-xs font-medium text-[var(--muted-foreground)]", children: label }), _jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), rows: rows, className: "w-full resize-none rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:ring-2 focus:ring-[var(--primary)] focus:outline-none", placeholder: placeholder }), charCount !== undefined && charTarget && (_jsxs("p", { className: "mt-1 text-xs text-[var(--muted-foreground)]", children: [charCount, " chars ", charTarget] }))] }));
}
export function SEOPanel({ title, slug, content = '', seoData, onChange, siteUrl = 'https://example.com', }) {
    const [expandedSections, setExpandedSections] = useState(['analysis']);
    const update = (partial) => {
        onChange({ ...seoData, ...partial });
    };
    const toggleSection = (id) => {
        setExpandedSections((prev) => prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]);
    };
    const checks = useMemo(() => runSEOChecks(seoData, title, slug, content), [seoData, title, slug, content]);
    const readability = useMemo(() => analyzeReadability(content), [content]);
    const score = useMemo(() => computeOverallScore(checks), [checks]);
    const goodCount = checks.filter((c) => c.status === 'good').length;
    const okCount = checks.filter((c) => c.status === 'ok').length;
    const badCount = checks.filter((c) => c.status === 'bad').length;
    const metaTitle = seoData.metaTitle ?? '';
    const metaDesc = seoData.metaDescription ?? '';
    const robotsPolicy = getRobotsPolicy(seoData);
    const displayTitle = seoData.ogTitle || metaTitle || title || 'Page Title';
    const displayDesc = seoData.ogDescription ||
        metaDesc ||
        'Add a meta description to see how this page will appear in search results.';
    const fleschLabel = readability.fleschScore >= 60
        ? 'Easy to read'
        : readability.fleschScore >= 30
            ? 'Fairly difficult'
            : 'Very difficult';
    const fleschColor = readability.fleschScore >= 60
        ? 'text-success'
        : readability.fleschScore >= 30
            ? 'text-warning'
            : 'text-destructive';
    return (_jsxs("div", { className: "rounded-lg border border-[var(--border)] bg-[var(--card)]", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[var(--border)] px-4 py-3", children: [_jsxs("h3", { className: "flex items-center gap-2 text-sm font-medium text-[var(--foreground)]", children: [_jsx(Search, { className: "h-4 w-4" }), "SEO"] }), _jsxs("button", { onClick: () => update({ metaTitle: title, ogTitle: '', ogDescription: '' }), className: "flex items-center gap-1 text-xs text-[var(--primary)] hover:opacity-80", children: [_jsx(RefreshCw, { className: "h-3 w-3" }), "Reset"] })] }), _jsxs("div", { className: "flex items-center gap-4 border-b border-[var(--border)] px-4 py-3", children: [_jsx(ScoreRing, { score: score }), _jsxs("div", { className: "space-y-0.5 text-xs text-[var(--muted-foreground)]", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(CheckCircle2, { className: "text-success h-3 w-3" }), " ", goodCount, " passed"] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(AlertCircle, { className: "text-warning h-3 w-3" }), " ", okCount, " improvements"] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(XCircle, { className: "text-destructive h-3 w-3" }), " ", badCount, " issues"] })] })] }), _jsxs("div", { className: "space-y-2 p-3", children: [_jsx(Section, { id: "analysis", title: "SEO Analysis", icon: _jsx(BarChart3, { className: "h-4 w-4" }), expanded: expandedSections.includes('analysis'), onToggle: toggleSection, badge: _jsxs("span", { className: "ml-1 inline-flex items-center rounded-full bg-[var(--muted)] px-2 py-0.5 text-[10px] font-medium text-[var(--muted-foreground)]", children: [goodCount, "/", checks.length] }), children: _jsx("div", { className: "space-y-1.5", children: checks.map((c) => (_jsxs("div", { className: "flex items-start gap-2 py-1", children: [_jsx(StatusDot, { status: c.status }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm leading-snug text-[var(--foreground)]", children: c.label }), _jsx("p", { className: "text-xs text-[var(--muted-foreground)]", children: c.detail })] })] }, c.id))) }) }), _jsxs(Section, { id: "readability", title: "Readability", icon: _jsx(BookOpen, { className: "h-4 w-4" }), expanded: expandedSections.includes('readability'), onToggle: toggleSection, children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "rounded-lg bg-[var(--muted)] p-2.5", children: [_jsx("p", { className: "text-xs text-[var(--muted-foreground)]", children: "Flesch Score" }), _jsx("p", { className: `text-lg font-medium ${fleschColor}`, children: readability.fleschScore }), _jsx("p", { className: `text-[10px] ${fleschColor}`, children: fleschLabel })] }), _jsxs("div", { className: "rounded-lg bg-[var(--muted)] p-2.5", children: [_jsx("p", { className: "text-xs text-[var(--muted-foreground)]", children: "Word Count" }), _jsx("p", { className: "text-lg font-medium text-[var(--foreground)]", children: readability.wordCount }), _jsx("p", { className: "text-[10px] text-[var(--muted-foreground)]", children: "words" })] }), _jsxs("div", { className: "rounded-lg bg-[var(--muted)] p-2.5", children: [_jsx("p", { className: "text-xs text-[var(--muted-foreground)]", children: "Avg. Sentence" }), _jsx("p", { className: "text-lg font-medium text-[var(--foreground)]", children: readability.avgSentenceLength.toFixed(1) }), _jsx("p", { className: "text-[10px] text-[var(--muted-foreground)]", children: "words/sentence" })] }), _jsxs("div", { className: "rounded-lg bg-[var(--muted)] p-2.5", children: [_jsx("p", { className: "text-xs text-[var(--muted-foreground)]", children: "Reading Time" }), _jsx("p", { className: "text-lg font-medium text-[var(--foreground)]", children: readability.readingTime }), _jsx("p", { className: "text-[10px] text-[var(--muted-foreground)]", children: "min" })] })] }), _jsxs("div", { className: "mt-3 flex items-center gap-2 text-xs text-[var(--muted-foreground)]", children: [_jsx("span", { children: "Passive voice est.:" }), _jsxs("span", { className: readability.passiveEstimate > 15
                                            ? 'text-warning font-medium'
                                            : 'text-success font-medium', children: [readability.passiveEstimate, "%"] })] })] }), _jsx(Section, { id: "basic", title: "Basic SEO", icon: _jsx(Target, { className: "h-4 w-4" }), expanded: expandedSections.includes('basic'), onToggle: toggleSection, children: _jsxs("div", { className: "space-y-3", children: [_jsx(InputField, { label: "Meta Title", value: metaTitle, onChange: (v) => update({ metaTitle: v }), placeholder: title || 'Enter meta title', charCount: metaTitle.length, charTarget: "(ideal: 30-60)" }), _jsx(TextareaField, { label: "Meta Description", value: metaDesc, onChange: (v) => update({ metaDescription: v }), placeholder: "Brief description for search engines", charCount: metaDesc.length, charTarget: "(ideal: 120-160)" }), _jsx(InputField, { label: "Focus Keyphrase", value: seoData.focusKeyphrase ?? '', onChange: (v) => update({ focusKeyphrase: v }), placeholder: "Primary keyword or phrase" }), _jsx(TextareaField, { label: "Key Takeaway", value: seoData.keyTakeaway ?? '', onChange: (v) => update({ keyTakeaway: v }), placeholder: "One or two sentences AI answer engines can quote", charCount: (seoData.keyTakeaway ?? '').length, charTarget: "(ideal: under 240)" }), _jsx(InputField, { label: "Canonical URL", value: seoData.canonical ?? '', onChange: (v) => update({ canonical: v }), placeholder: "https://example.com/canonical-url", type: "url" })] }) }), _jsx(Section, { id: "robots", title: "Robots Meta", icon: _jsx(EyeOff, { className: "h-4 w-4" }), expanded: expandedSections.includes('robots'), onToggle: toggleSection, children: _jsx("div", { className: "space-y-4", children: _jsxs("div", { children: [_jsx("label", { id: "robots-policy-label", className: "text-muted-foreground mb-1 block text-xs font-medium", children: "Robots Policy" }), _jsxs(Select.Root, { value: robotsPolicy, onValueChange: (value) => {
                                            const policy = value;
                                            update({ robotsPolicy: policy, ...robotsPolicyToBooleans(policy) });
                                        }, children: [_jsxs(Select.Trigger, { "aria-labelledby": "robots-policy-label", className: "border-border bg-background text-foreground focus:ring-primary flex w-full items-center justify-between rounded-lg border px-3 py-1.5 text-sm focus:ring-2 focus:outline-none", children: [_jsx(Select.Value, {}), _jsx(Select.Icon, { children: _jsx(ChevronDown, { className: "text-muted-foreground h-4 w-4" }) })] }), _jsx(Select.Portal, { container: adminPortalContainer(), children: _jsx(Select.Content, { className: "border-border bg-card z-50 overflow-hidden rounded-lg border shadow-md", children: _jsx(Select.Viewport, { className: "p-1", children: ROBOTS_POLICY_OPTIONS.map((option) => (_jsxs(Select.Item, { value: option.value, className: "text-foreground hover:bg-muted focus:bg-muted relative flex cursor-pointer items-center rounded-md py-1.5 pr-3 pl-8 text-sm outline-none select-none", children: [_jsx(Select.ItemIndicator, { className: "absolute left-2 inline-flex items-center", children: _jsx(Check, { className: "h-4 w-4" }) }), _jsx(Select.ItemText, { children: option.label })] }, option.value))) }) }) })] }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: "Use inheritance for most pages. Override only when a page needs different index/follow behavior." })] }) }) }), _jsx(Section, { id: "preview", title: "Search Preview", icon: _jsx(Globe, { className: "h-4 w-4" }), expanded: expandedSections.includes('preview'), onToggle: toggleSection, children: _jsxs("div", { className: "rounded-lg border border-[var(--border)] bg-[var(--background)] p-3", children: [_jsx("div", { className: "text-primary line-clamp-1 cursor-pointer text-sm hover:underline", children: metaTitle || title || 'Page Title' }), _jsxs("div", { className: "text-success mt-1 truncate text-xs", children: [siteUrl, "/", slug] }), _jsx("div", { className: "mt-1 line-clamp-2 text-sm text-[var(--muted-foreground)]", children: metaDesc ||
                                        'Add a meta description to see how this page will appear in search results.' })] }) }), _jsx(Section, { id: "social", title: "Social Media", icon: _jsx(Share2, { className: "h-4 w-4" }), expanded: expandedSections.includes('social'), onToggle: toggleSection, children: _jsxs("div", { className: "space-y-3", children: [_jsx(InputField, { label: "OG Title", value: seoData.ogTitle ?? '', onChange: (v) => update({ ogTitle: v }), placeholder: metaTitle || title || 'Leave blank to use meta title' }), _jsx(TextareaField, { label: "OG Description", value: seoData.ogDescription ?? '', onChange: (v) => update({ ogDescription: v }), rows: 2, placeholder: metaDesc || 'Leave blank to use meta description' }), _jsx(InputField, { label: "OG Image URL", value: seoData.ogImage ?? '', onChange: (v) => update({ ogImage: v }), placeholder: "https://example.com/og-image.jpg", type: "url" }), _jsxs("div", { className: "mt-3 border-t border-[var(--border)] pt-3", children: [_jsx("p", { className: "mb-2 text-xs font-medium text-[var(--muted-foreground)]", children: "Twitter / X Overrides" }), _jsxs("div", { className: "space-y-3", children: [_jsx(InputField, { label: "Twitter Title", value: seoData.twitterTitle ?? '', onChange: (v) => update({ twitterTitle: v }), placeholder: "Leave blank to use OG title" }), _jsx(TextareaField, { label: "Twitter Description", value: seoData.twitterDescription ?? '', onChange: (v) => update({ twitterDescription: v }), rows: 2, placeholder: "Leave blank to use OG description" }), _jsx(InputField, { label: "Twitter Image URL", value: seoData.twitterImage ?? '', onChange: (v) => update({ twitterImage: v }), placeholder: "Leave blank to use OG image", type: "url" })] })] }), _jsxs("div", { className: "mt-3", children: [_jsx("p", { className: "mb-2 text-xs font-medium text-[var(--muted-foreground)]", children: "Social Preview" }), _jsxs("div", { className: "overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--muted)]", children: [seoData.ogImage ? (_jsx("div", { className: "flex aspect-video items-center justify-center overflow-hidden bg-[var(--muted)]", children: _jsx("img", { src: seoData.ogImage, alt: "OG preview", className: "h-full w-full object-cover" }) })) : (_jsx("div", { className: "flex aspect-video items-center justify-center bg-[var(--muted)] text-sm text-[var(--muted-foreground)]", children: "No OG image set" })), _jsxs("div", { className: "p-3", children: [_jsx("div", { className: "line-clamp-1 text-sm font-medium text-[var(--foreground)]", children: displayTitle }), _jsx("div", { className: "mt-1 line-clamp-2 text-xs text-[var(--muted-foreground)]", children: displayDesc.slice(0, 100) }), _jsx("div", { className: "mt-1 truncate text-xs text-[var(--muted-foreground)]", children: siteUrl })] })] })] })] }) }), _jsx(Section, { id: "advanced", title: "Advanced", icon: _jsx(Settings2, { className: "h-4 w-4" }), expanded: expandedSections.includes('advanced'), onToggle: toggleSection, children: _jsxs("div", { className: "space-y-4", children: [_jsx(ToggleSwitch, { label: "Cornerstone Content", description: "Mark as cornerstone \u2014 your most important, comprehensive articles", checked: seoData.isCornerstone ?? false, onChange: (v) => update({ isCornerstone: v }) }), seoData.isCornerstone && (_jsxs("div", { className: "text-warning bg-warning/10 flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs", children: [_jsx(Star, { className: "h-3.5 w-3.5" }), "Cornerstone content is held to stricter SEO standards"] })), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-xs font-medium text-[var(--muted-foreground)]", children: "Schema Type" }), _jsx("select", { value: seoData.schemaType ?? 'Article', onChange: (e) => update({ schemaType: e.target.value }), className: "w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] focus:ring-2 focus:ring-[var(--primary)] focus:outline-none", children: SCHEMA_TYPES.map((t) => (_jsx("option", { value: t, children: t }, t))) })] })] }) })] })] }));
}
//# sourceMappingURL=SEOPanel.js.map