'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Copy, Minus, Plus, Trash2, X } from 'lucide-react';
import { toast } from 'sonner';
import { InspectorPaneBody, InspectorPaneFooter, InspectorPaneHeader, InspectorPaneSection, } from '../ui/InspectorPane.js';
import { Toggle } from '../ui/Toggle.js';
import { ConfirmDialog } from '../ui/ConfirmDialog.js';
import { cmsApi } from '../../lib/api.js';
export const PLACEMENT_LABELS = {
    head: 'Head',
    body_open: 'Body start',
    body_close: 'Body end',
};
export const CONSENT_LABELS = {
    none: 'No consent',
    analytics: 'Analytics',
    marketing: 'Marketing',
    functional: 'Functional',
    preferences: 'Preferences',
};
/** Design-system location badges (`.loc-head` / `.loc-bs` / `.loc-be`). */
export const PLACEMENT_COLORS = {
    head: 'bg-[var(--acc-l)] text-[var(--acc)]',
    body_open: 'bg-[var(--suc-l)] text-[var(--suc)]',
    body_close: 'bg-[var(--info-l)] text-[var(--info)]',
};
/** Neutral "No consent" chip — also the fallback for unknown categories. */
export const NO_CONSENT_COLORS = {
    badge: 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--muted)]',
    dot: 'bg-[var(--muted)]',
};
/** Design-system consent badges (`.cb-*`): tinted chip + colored dot per category. */
export const CONSENT_COLORS = {
    none: NO_CONSENT_COLORS,
    analytics: { badge: 'bg-[var(--acc-l)] text-[var(--acc)]', dot: 'bg-[var(--acc)]' },
    marketing: { badge: 'bg-[var(--err-l)] text-[var(--err)]', dot: 'bg-[var(--err)]' },
    functional: { badge: 'bg-[var(--suc-l)] text-[var(--suc)]', dot: 'bg-[var(--suc)]' },
    preferences: { badge: 'bg-[var(--warn-l)] text-[var(--warn)]', dot: 'bg-[var(--warn)]' },
};
const PLACEMENT_OPTIONS = [
    { value: 'head', label: 'Head', hint: '<head>' },
    { value: 'body_open', label: 'Body start', hint: '<body>' },
    { value: 'body_close', label: 'Body end', hint: '</body>' },
];
const SCOPE_OPTIONS = [
    { value: 'site', label: 'Entire site' },
    { value: 'parents', label: 'Parent pages' },
    { value: 'urls', label: 'Specific URLs' },
];
const CONSENT_OPTIONS = ['none', 'analytics', 'marketing', 'functional', 'preferences'];
function OptionTile({ active, onClick, children, }) {
    return (_jsx("button", { type: "button", "aria-pressed": active, onClick: onClick, className: `rounded-[7px] border px-2 py-2 text-[12px] font-medium transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none ${active
            ? 'border-[var(--acc)] bg-[var(--acc-l)] text-[var(--acc)]'
            : 'border-[var(--bdr)] bg-[var(--card)] text-[var(--sub)] hover:border-[var(--acc-m)]'}`, children: children }));
}
function ToggleRow({ label, hint, checked, onCheckedChange, }) {
    return (_jsxs("div", { className: "flex items-center justify-between gap-3 py-1.5", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[12.5px] font-medium text-[var(--txt)]", children: label }), _jsx("div", { className: "text-[11px] text-[var(--muted)]", children: hint })] }), _jsx(Toggle, { checked: checked, onCheckedChange: onCheckedChange, "aria-label": label })] }));
}
export function ScriptTagEditorPane({ tag, onClose, onChanged }) {
    const isNew = tag === null;
    const [name, setName] = useState('');
    const [code, setCode] = useState('');
    const [placement, setPlacement] = useState('head');
    const [scope, setScope] = useState('site');
    const [targetPaths, setTargetPaths] = useState([]);
    const [pathInput, setPathInput] = useState('');
    const [priority, setPriority] = useState(100);
    const [enabled, setEnabled] = useState(true);
    const [loadAsync, setLoadAsync] = useState(false);
    const [disableInPreview, setDisableInPreview] = useState(true);
    const [consentCategory, setConsentCategory] = useState('none');
    const [saving, setSaving] = useState(false);
    const [confirmDelete, setConfirmDelete] = useState(false);
    useEffect(() => {
        setName(tag?.name ?? '');
        setCode(tag?.code ?? '');
        setPlacement(tag?.placement ?? 'head');
        setScope(tag?.scope ?? 'site');
        setTargetPaths(tag?.targetPaths ?? []);
        setPathInput('');
        setPriority(tag?.priority ?? 100);
        setEnabled(tag?.enabled ?? true);
        setLoadAsync(tag?.loadAsync ?? false);
        setDisableInPreview(tag?.disableInPreview ?? true);
        setConsentCategory(tag?.consentCategory ?? 'none');
    }, [tag]);
    const addPath = () => {
        const trimmed = pathInput.trim();
        if (!trimmed)
            return;
        const normalized = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
        if (!targetPaths.includes(normalized))
            setTargetPaths([...targetPaths, normalized]);
        setPathInput('');
    };
    const buildPayload = () => ({
        name: name.trim(),
        code,
        placement,
        scope,
        targetPaths: scope === 'site' ? [] : targetPaths,
        priority,
        enabled,
        loadAsync,
        disableInPreview,
        consentCategory,
    });
    const validate = () => {
        if (!name.trim()) {
            toast.error('Name is required');
            return false;
        }
        if (!code.trim()) {
            toast.error('Code snippet is required');
            return false;
        }
        if (scope !== 'site' && targetPaths.length === 0) {
            toast.error('At least one target path is required for this scope');
            return false;
        }
        return true;
    };
    const handleSave = async () => {
        if (!validate())
            return;
        setSaving(true);
        const res = isNew
            ? await cmsApi('/script-tags', {
                method: 'POST',
                body: JSON.stringify(buildPayload()),
            })
            : await cmsApi(`/script-tags/${tag.id}`, {
                method: 'PUT',
                body: JSON.stringify(buildPayload()),
            });
        setSaving(false);
        if (res.error) {
            toast.error(res.error);
            return;
        }
        toast.success(isNew ? 'Script created' : 'Script saved');
        onChanged(res.data?.id ?? tag?.id);
    };
    const handleDuplicate = async () => {
        if (!tag)
            return;
        const res = await cmsApi('/script-tags', {
            method: 'POST',
            body: JSON.stringify({ ...buildPayload(), name: `${name.trim()} (Copy)`, enabled: false }),
        });
        if (res.error) {
            toast.error(res.error);
            return;
        }
        toast.success('Script duplicated (created disabled)');
        onChanged(res.data?.id);
    };
    const handleDelete = async () => {
        if (!tag)
            return;
        const res = await cmsApi(`/script-tags/${tag.id}`, { method: 'DELETE' });
        setConfirmDelete(false);
        if (res.error) {
            toast.error(res.error);
            return;
        }
        toast.success('Script deleted');
        onChanged();
        onClose();
    };
    return (_jsxs(_Fragment, { children: [_jsxs(InspectorPaneHeader, { onClose: onClose, closeLabel: "Close script editor", children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "Script name\u2026", "aria-label": "Script name", className: "min-w-0 flex-1 rounded-[7px] border border-transparent bg-transparent px-1.5 py-1 text-[14px] font-semibold text-[var(--txt)] transition-colors duration-[var(--motion-fast)] hover:border-[var(--bdr)] focus:border-[var(--acc)] focus:outline-none" }), _jsx(Toggle, { checked: enabled, onCheckedChange: setEnabled, variant: "enabled", "aria-label": enabled ? 'Deactivate script' : 'Activate script' })] }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5 px-1.5", children: [_jsx("span", { className: `rounded-[5px] px-1.5 py-0.5 text-[10.5px] font-medium ${PLACEMENT_COLORS[placement] ?? 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--sub)]'}`, children: PLACEMENT_LABELS[placement] ?? placement }), _jsxs("span", { className: `inline-flex items-center gap-[3px] rounded-[5px] px-1.5 py-0.5 text-[10.5px] font-medium ${(CONSENT_COLORS[consentCategory] ?? NO_CONSENT_COLORS).badge}`, children: [_jsx("span", { className: `inline-block h-[5px] w-[5px] rounded-full ${(CONSENT_COLORS[consentCategory] ?? NO_CONSENT_COLORS).dot}`, "aria-hidden": true }), CONSENT_LABELS[consentCategory] ?? consentCategory] })] })] }), _jsxs(InspectorPaneBody, { children: [_jsxs(InspectorPaneSection, { title: "Code", subtitle: "HTML / JS", children: [_jsx("textarea", { value: code, onChange: (e) => setCode(e.target.value), placeholder: "<!-- Paste your script here -->", rows: 8, spellCheck: false, "aria-label": "Script code", className: "w-full rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-2 font-mono text-[11.5px] text-[var(--txt)] focus:border-[var(--acc)] focus:outline-none" }), _jsx("p", { className: "mt-1 text-[11px] text-[var(--muted)]", children: "Fires on frontend only \u2014 never injected during CMS rendering." })] }), _jsxs(InspectorPaneSection, { title: "Injection Location", children: [_jsx("div", { className: "grid grid-cols-3 gap-1.5", role: "group", "aria-label": "Injection location", children: PLACEMENT_OPTIONS.map((opt) => (_jsxs(OptionTile, { active: placement === opt.value, onClick: () => setPlacement(opt.value), children: [_jsx("span", { className: "block", children: opt.label }), _jsx("span", { className: "block font-mono text-[10px] font-normal text-[var(--muted)]", children: opt.hint })] }, opt.value))) }), _jsxs("div", { className: "mt-3 flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[12.5px] font-medium text-[var(--txt)]", children: "Load Priority" }), _jsx("div", { className: "text-[11px] text-[var(--muted)]", children: "Lower = fires first" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", "aria-label": "Decrease priority", onClick: () => setPriority((p) => Math.max(0, p - 1)), className: "flex h-[27px] w-[27px] items-center justify-center rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:border-[var(--acc-m)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none", children: _jsx(Minus, { size: 13 }) }), _jsx("input", { type: "number", value: priority, min: 0, onChange: (e) => setPriority(Math.max(0, parseInt(e.target.value, 10) || 0)), "aria-label": "Load priority", className: "w-14 rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] px-1.5 py-1 text-center font-mono text-[12px] text-[var(--txt)] focus:border-[var(--acc)] focus:outline-none" }), _jsx("button", { type: "button", "aria-label": "Increase priority", onClick: () => setPriority((p) => p + 1), className: "flex h-[27px] w-[27px] items-center justify-center rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:border-[var(--acc-m)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none", children: _jsx(Plus, { size: 13 }) })] })] })] }), _jsxs(InspectorPaneSection, { title: "Firing Conditions", children: [_jsx("div", { className: "grid grid-cols-3 gap-1.5", role: "group", "aria-label": "Scope", children: SCOPE_OPTIONS.map((opt) => (_jsx(OptionTile, { active: scope === opt.value, onClick: () => setScope(opt.value), children: opt.label }, opt.value))) }), scope !== 'site' && (_jsxs("div", { className: "mt-3", children: [_jsx("label", { htmlFor: "script-tag-path-input", className: "mb-1 block text-[11.5px] font-medium text-[var(--sub)]", children: scope === 'parents' ? 'Parent paths (includes child pages)' : 'URL paths' }), _jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { id: "script-tag-path-input", type: "text", value: pathInput, onChange: (e) => setPathInput(e.target.value), onKeyDown: (e) => {
                                                    if (e.key === 'Enter') {
                                                        e.preventDefault();
                                                        addPath();
                                                    }
                                                }, placeholder: "/services", className: "min-w-0 flex-1 rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1.5 font-mono text-[12px] text-[var(--txt)] focus:border-[var(--acc)] focus:outline-none" }), _jsx("button", { type: "button", onClick: addPath, "aria-label": "Add path", className: "flex h-[31px] w-[31px] shrink-0 items-center justify-center rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:border-[var(--acc-m)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none", children: _jsx(Plus, { size: 14 }) })] }), targetPaths.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap gap-1.5", children: targetPaths.map((p) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-[var(--r-pill)] border border-[var(--bdr)] bg-[var(--bg)] px-2 py-0.5 font-mono text-[11px] text-[var(--sub)]", children: [p, _jsx("button", { type: "button", onClick: () => setTargetPaths(targetPaths.filter((x) => x !== p)), "aria-label": `Remove ${p}`, className: "text-[var(--muted)] hover:text-[var(--err)]", children: _jsx(X, { size: 11 }) })] }, p))) }))] }))] }), _jsxs(InspectorPaneSection, { title: "Cookie Consent", subtitle: "GDPR / CCPA", children: [_jsx("div", { className: "mb-1.5 text-[12.5px] font-medium text-[var(--txt)]", children: "Consent category required" }), _jsx("div", { className: "grid grid-cols-3 gap-1.5", role: "group", "aria-label": "Consent category", children: CONSENT_OPTIONS.map((value) => (_jsx(OptionTile, { active: consentCategory === value, onClick: () => setConsentCategory(value), children: CONSENT_LABELS[value] }, value))) }), consentCategory !== 'none' && (_jsxs("p", { className: "mt-2 text-[11px] text-[var(--muted)]", children: ["The script is injected only after the visitor grants the", ' ', CONSENT_LABELS[consentCategory] ?? consentCategory, " consent category (Actuate Consent banner)."] }))] }), _jsxs(InspectorPaneSection, { title: "Advanced", children: [_jsx(ToggleRow, { label: "Load async", hint: "Non-blocking \u2014 doesn't delay page render", checked: loadAsync, onCheckedChange: setLoadAsync }), _jsx(ToggleRow, { label: "Disable in preview mode", hint: "Skip firing inside CMS page preview", checked: disableInPreview, onCheckedChange: setDisableInPreview })] })] }), _jsxs(InspectorPaneFooter, { children: [_jsx("button", { type: "button", onClick: () => void handleSave(), disabled: saving, className: "bg-primary text-primary-foreground w-full rounded-[7px] px-3 py-2 text-[13px] font-semibold transition-colors duration-[var(--motion-fast)] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", children: saving ? 'Saving…' : 'Save Script' }), !isNew && (_jsxs("div", { className: "mt-2 flex items-center justify-center gap-4", children: [_jsxs("button", { type: "button", onClick: () => void handleDuplicate(), className: "inline-flex items-center gap-1.5 text-[12px] text-[var(--sub)] transition-colors duration-[var(--motion-fast)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none", children: [_jsx(Copy, { size: 12 }), "Duplicate"] }), _jsxs("button", { type: "button", onClick: () => setConfirmDelete(true), className: "inline-flex items-center gap-1.5 text-[12px] text-[var(--sub)] transition-colors duration-[var(--motion-fast)] hover:text-[var(--err)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none", children: [_jsx(Trash2, { size: 12 }), "Delete"] })] }))] }), _jsx(ConfirmDialog, { open: confirmDelete, title: "Delete script?", description: `"${name || 'This script'}" will stop firing on your site immediately.`, confirmLabel: "Delete", destructive: true, onConfirm: () => void handleDelete(), onClose: () => setConfirmDelete(false) })] }));
}
//# sourceMappingURL=ScriptTagEditorPane.js.map