'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { MAX_BANNED_TERMS, MAX_PREFERRED_TERMS, MAX_WORKED_EXAMPLES, } from '@actuate-media/cms-core/brand-voice';
import { Plus, Trash2 } from 'lucide-react';
import { useId } from 'react';
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 LABEL_CLASS = 'mb-1 block text-sm font-medium text-foreground';
export function BrandVoiceRulesSections({ structured, disabled, onChange, }) {
    const preferredId = useId();
    const patternId = useId();
    function update(patch) {
        onChange({ ...structured, ...patch });
    }
    function updateBanned(index, patch) {
        const bannedTerms = structured.bannedTerms.map((row, i) => i === index ? { ...row, ...patch } : row);
        update({ bannedTerms });
    }
    function updateChannel(index, patch) {
        const channels = structured.channels.map((row, i) => (i === index ? { ...row, ...patch } : row));
        update({ channels });
    }
    function updateExample(index, patch) {
        const workedExamples = structured.workedExamples.map((row, i) => i === index ? { ...row, ...patch } : row);
        update({ workedExamples });
    }
    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-foreground text-base font-medium", children: "Vocabulary rules" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Banned terms produce deterministic alignment errors. Preferred terms are scored as bonuses." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: "Banned terms" }), structured.bannedTerms.length === 0 && (_jsx("p", { className: "text-muted-foreground text-sm", children: "No banned terms yet." })), structured.bannedTerms.map((row, index) => (_jsxs("div", { className: "grid gap-2 md:grid-cols-[1fr_1fr_auto]", children: [_jsx("input", { type: "text", value: row.term, disabled: disabled, placeholder: "e.g. cheap", "aria-label": `Banned term ${index + 1}`, onChange: (e) => updateBanned(index, { term: e.target.value }), className: INPUT_CLASS }), _jsx("input", { type: "text", value: row.useInstead, disabled: disabled, placeholder: "Use instead (optional)", "aria-label": `Replacement for banned term ${index + 1}`, onChange: (e) => updateBanned(index, { useInstead: e.target.value }), className: INPUT_CLASS }), _jsx("button", { type: "button", disabled: disabled, "aria-label": `Remove banned term ${index + 1}`, onClick: () => update({ bannedTerms: structured.bannedTerms.filter((_, i) => i !== index) }), className: "border-border text-muted-foreground hover:bg-accent inline-flex items-center justify-center rounded-md border px-3 py-2 transition-colors disabled:opacity-50", children: _jsx(Trash2, { size: 16, "aria-hidden": "true" }) })] }, `banned-${index}`))), _jsxs("button", { type: "button", disabled: disabled || structured.bannedTerms.length >= MAX_BANNED_TERMS, onClick: () => update({ bannedTerms: [...structured.bannedTerms, { term: '', useInstead: '' }] }), className: "border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:opacity-50", children: [_jsx(Plus, { size: 14, "aria-hidden": "true" }), "Add banned term"] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: preferredId, className: LABEL_CLASS, children: "Preferred terms" }), _jsx("input", { id: preferredId, type: "text", disabled: disabled, placeholder: "Comma-separated, e.g. ecommerce, sign up", value: structured.preferredTerms.join(', '), onChange: (e) => update({
                                    preferredTerms: e.target.value
                                        .split(',')
                                        .map((t) => t.trim())
                                        .filter(Boolean)
                                        .slice(0, MAX_PREFERRED_TERMS),
                                }), className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: patternId, className: LABEL_CLASS, children: "Avoid patterns" }), _jsx("textarea", { id: patternId, disabled: disabled, placeholder: 'One per line, e.g.\nhype stacking (multiple superlatives in one sentence)', value: structured.avoidPatterns.join('\n'), onChange: (e) => update({
                                    avoidPatterns: e.target.value
                                        .split('\n')
                                        .map((line) => line.trim())
                                        .filter(Boolean),
                                }), className: `${INPUT_CLASS} min-h-[88px] resize-y` })] })] }), _jsxs("section", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-foreground text-base font-medium", children: "Channel overrides" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Length limits and notes used when scoring copy for a specific channel." })] }), _jsx("div", { className: "space-y-3", children: structured.channels.map((channel, index) => (_jsxs("div", { className: "border-border rounded-md border p-4", children: [_jsx("p", { className: "text-foreground mb-3 text-sm font-medium", children: channel.label }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [channel.id === 'google_ads' ? (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Max headline chars" }), _jsx("input", { type: "number", min: 1, disabled: disabled, value: channel.maxHeadlineChars ?? '', onChange: (e) => updateChannel(index, {
                                                                maxHeadlineChars: e.target.value ? Number(e.target.value) : undefined,
                                                            }), className: INPUT_CLASS })] }), _jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Max description chars" }), _jsx("input", { type: "number", min: 1, disabled: disabled, value: channel.maxDescriptionChars ?? '', onChange: (e) => updateChannel(index, {
                                                                maxDescriptionChars: e.target.value
                                                                    ? Number(e.target.value)
                                                                    : undefined,
                                                            }), className: INPUT_CLASS })] })] })) : (_jsxs("div", { children: [_jsx("label", { className: LABEL_CLASS, children: "Max characters" }), _jsx("input", { type: "number", min: 1, disabled: disabled, value: channel.maxChars ?? '', onChange: (e) => updateChannel(index, {
                                                        maxChars: e.target.value ? Number(e.target.value) : undefined,
                                                    }), className: INPUT_CLASS })] })), _jsxs("div", { className: channel.id === 'google_ads' ? 'md:col-span-1' : 'md:col-span-2', children: [_jsx("label", { className: LABEL_CLASS, children: "Note" }), _jsx("input", { type: "text", disabled: disabled, value: channel.note ?? '', onChange: (e) => updateChannel(index, { note: e.target.value }), className: INPUT_CLASS })] })] })] }, channel.id))) })] }), _jsxs("section", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-foreground text-base font-medium", children: "Worked examples" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Off-brand vs on-brand pairs anchor scoring feedback and the sample copy field." })] }), structured.workedExamples.length === 0 && (_jsx("p", { className: "text-muted-foreground text-sm", children: "No worked examples yet." })), structured.workedExamples.map((example, index) => (_jsxs("div", { className: "border-border space-y-2 rounded-md border p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("p", { className: "text-foreground text-sm font-medium", children: ["Example ", index + 1] }), _jsx("button", { type: "button", disabled: disabled, "aria-label": `Remove worked example ${index + 1}`, onClick: () => update({
                                            workedExamples: structured.workedExamples.filter((_, i) => i !== index),
                                        }), className: "border-border text-muted-foreground hover:bg-accent inline-flex items-center justify-center rounded-md border px-2 py-1 transition-colors disabled:opacity-50", children: _jsx(Trash2, { size: 14, "aria-hidden": "true" }) })] }), _jsx("input", { type: "text", disabled: disabled, placeholder: "Off-brand copy", "aria-label": `Off-brand example ${index + 1}`, value: example.offBrand, onChange: (e) => updateExample(index, { offBrand: e.target.value }), className: INPUT_CLASS }), _jsx("input", { type: "text", disabled: disabled, placeholder: "On-brand rewrite", "aria-label": `On-brand example ${index + 1}`, value: example.onBrand, onChange: (e) => updateExample(index, { onBrand: e.target.value }), className: INPUT_CLASS }), _jsx("input", { type: "text", disabled: disabled, placeholder: "Why this is better", "aria-label": `Why example ${index + 1} is on-brand`, value: example.why, onChange: (e) => updateExample(index, { why: e.target.value }), className: INPUT_CLASS })] }, `example-${index}`))), _jsxs("button", { type: "button", disabled: disabled || structured.workedExamples.length >= MAX_WORKED_EXAMPLES, onClick: () => update({
                            workedExamples: [
                                ...structured.workedExamples,
                                { offBrand: '', onBrand: '', why: '' },
                            ],
                        }), className: "border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:opacity-50", children: [_jsx(Plus, { size: 14, "aria-hidden": "true" }), "Add worked example"] })] })] }));
}
//# sourceMappingURL=BrandVoiceRulesSections.js.map