'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BRAND_VOICE_CHANNEL_PRESETS } from '@actuate-media/cms-core/brand-voice';
import { Loader2, Wand2 } from 'lucide-react';
import { useId, useState } from 'react';
import { toast } from 'sonner';
import { fixBrandVoiceContent } from '../../../lib/brand-voice-client.js';
const INPUT_CLASS = 'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60';
const TEXTAREA_CLASS = `${INPUT_CLASS} min-h-[120px] resize-y`;
const LABEL_CLASS = 'mb-1 block text-sm font-medium text-foreground';
function scoreTone(score) {
    if (score >= 85)
        return 'text-success';
    if (score >= 65)
        return 'text-warning';
    return 'text-destructive';
}
export function BrandVoiceAlignmentPanel({ disabled, onScore, }) {
    const contentId = useId();
    const channelId = useId();
    const [content, setContent] = useState('');
    const [channel, setChannel] = useState('');
    const [loading, setLoading] = useState(false);
    const [fixing, setFixing] = useState(false);
    const [result, setResult] = useState(null);
    const [error, setError] = useState(null);
    async function runScore() {
        if (!content.trim())
            return;
        setLoading(true);
        setError(null);
        try {
            const res = await onScore({
                content: content.trim(),
                channel: channel || undefined,
            });
            if (!res.ok || !res.result) {
                setResult(null);
                setError(res.error ?? 'Could not score this copy.');
                return;
            }
            setResult(res.result);
        }
        finally {
            setLoading(false);
        }
    }
    async function runFix() {
        if (!content.trim())
            return;
        setFixing(true);
        setError(null);
        try {
            const res = await fixBrandVoiceContent({
                content: content.trim(),
                channel: channel || undefined,
            });
            if (!res.ok || !res.result) {
                setError(res.error ?? 'Could not fix this copy.');
                return;
            }
            setContent(res.result.text);
            setResult(res.result.afterScore);
            toast.success(res.result.usedAi
                ? 'Copy revised to match brand voice.'
                : 'Applied brand voice rule fixes.');
        }
        finally {
            setFixing(false);
        }
    }
    return (_jsxs("div", { className: "border-border space-y-4 rounded-md border border-dashed p-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-foreground text-base font-medium", children: "Check alignment" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Paste draft copy to score it against your vocabulary rules, mechanics, and channel limits." })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-[1fr_220px]", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: contentId, className: LABEL_CLASS, children: "Draft copy" }), _jsx("textarea", { id: contentId, value: content, disabled: disabled || loading, placeholder: "Paste a headline, meta description, or paragraph to score.", onChange: (e) => setContent(e.target.value), className: TEXTAREA_CLASS })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: channelId, className: LABEL_CLASS, children: "Channel (optional)" }), _jsxs("select", { id: channelId, value: channel, disabled: disabled || loading, onChange: (e) => setChannel(e.target.value), className: INPUT_CLASS, children: [_jsx("option", { value: "", children: "General" }), BRAND_VOICE_CHANNEL_PRESETS.map((preset) => (_jsx("option", { value: preset.id, children: preset.label }, preset.id)))] }), _jsxs("button", { type: "button", onClick: runScore, disabled: disabled || loading || !content.trim(), className: "bg-primary text-primary-foreground mt-3 inline-flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50", children: [loading && _jsx(Loader2, { size: 16, className: "animate-spin", "aria-hidden": "true" }), "Score copy"] })] })] }), error && (_jsx("div", { role: "alert", className: "border-destructive/30 bg-destructive/10 text-destructive rounded-md border p-3 text-sm", children: error })), result && (_jsxs("div", { className: "space-y-3", "aria-live": "polite", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("p", { className: `text-2xl font-medium ${scoreTone(result.score)}`, children: [result.score, "/100"] }), _jsx("p", { className: "text-muted-foreground text-sm", children: result.channel ? `Scored for ${result.channel.replace(/_/g, ' ')}` : 'General score' }), result.score < 85 && (_jsxs("button", { type: "button", onClick: runFix, disabled: disabled || fixing || loading, className: "border-border bg-card text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50", children: [fixing ? (_jsx(Loader2, { size: 16, className: "animate-spin", "aria-hidden": "true" })) : (_jsx(Wand2, { size: 16, "aria-hidden": "true" })), "Fix to match brand voice"] }))] }), result.issues.length > 0 && (_jsx("ul", { className: "space-y-2", children: result.issues.map((issue) => (_jsxs("li", { className: "border-border bg-muted/30 rounded-md border px-3 py-2 text-sm", children: [_jsx("p", { className: "text-foreground", children: issue.message }), issue.suggestion && (_jsx("p", { className: "text-muted-foreground mt-1", children: issue.suggestion }))] }, issue.id))) })), result.dimensions.length > 0 && (_jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: result.dimensions.map((dimension) => (_jsxs("div", { className: "border-border rounded-md border px-3 py-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: dimension.name }), _jsx("p", { className: `text-sm ${scoreTone(dimension.score)}`, children: dimension.score })] }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: dimension.feedback })] }, dimension.name))) }))] }))] }));
}
//# sourceMappingURL=BrandVoiceAlignmentPanel.js.map