'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Code2, Plus, Loader2, AlertTriangle } from 'lucide-react';
import { toast } from 'sonner';
import { useApiData } from '../lib/useApiData.js';
import { cmsApi } from '../lib/api.js';
const PLACEMENT_LABELS = {
    head: 'Head',
    body_open: 'Body Open',
    body_close: 'Body Close',
};
const PLACEMENT_COLORS = {
    head: 'bg-accent text-accent-foreground',
    body_open: 'bg-primary/15 text-primary',
    body_close: 'bg-success/15 text-success',
};
function scopeLabel(tag) {
    const scope = String(tag.scope ?? '');
    const targetPaths = Array.isArray(tag.targetPaths) ? tag.targetPaths : [];
    if (scope === 'site')
        return 'Entire Site';
    if (scope === 'parents') {
        const count = targetPaths.length;
        return `${count} parent path${count !== 1 ? 's' : ''} + children`;
    }
    if (scope === 'urls') {
        const count = targetPaths.length;
        return `${count} URL${count !== 1 ? 's' : ''}`;
    }
    return scope || 'Custom';
}
export function ScriptTags({ onNavigate }) {
    const { data, loading, error, refetch } = useApiData('/script-tags');
    const [togglingId, setTogglingId] = useState(null);
    const tags = data ?? [];
    const toggleEnabled = async (tag) => {
        setTogglingId(tag.id);
        const res = await cmsApi(`/script-tags/${tag.id}`, {
            method: 'PUT',
            body: JSON.stringify({ enabled: !tag.enabled }),
        });
        setTogglingId(null);
        if (res.error) {
            toast.error(res.error);
        }
        else {
            refetch();
        }
    };
    if (loading) {
        return (_jsx("div", { className: "flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8", children: _jsx(Loader2, { className: "text-primary h-6 w-6 animate-spin" }) }));
    }
    return (_jsxs("div", { className: "p-3 pr-6 sm:p-4 sm:pr-8", children: [error && (_jsxs("div", { className: "border-destructive/30 bg-destructive/10 mb-4 flex items-center gap-3 rounded-lg border p-3", children: [_jsx(AlertTriangle, { className: "text-destructive h-5 w-5 shrink-0" }), _jsx("span", { className: "text-destructive flex-1 text-sm", children: error }), _jsx("button", { onClick: refetch, className: "border-destructive/40 text-destructive hover:bg-destructive/15 rounded-lg border px-3 py-1 text-sm transition-colors", children: "Retry" })] })), _jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-foreground mb-1 text-2xl font-medium", children: "Script Tags" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Manage tracking codes, analytics, and custom scripts injected into your site" })] }), _jsxs("button", { type: "button", onClick: () => onNavigate?.('/script-tags/new'), className: "bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors", children: [_jsx(Plus, { className: "h-4 w-4" }), "New Tag"] })] }), tags.length === 0 && !error ? (_jsxs("div", { className: "border-border bg-card rounded-lg border p-12 text-center", children: [_jsx(Code2, { className: "text-muted-foreground mx-auto mb-3 h-10 w-10" }), _jsx("h3", { className: "text-foreground text-sm font-medium", children: "No script tags yet" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Add tracking codes like Google Analytics, Tag Manager, or Facebook Pixel." }), _jsxs("button", { type: "button", onClick: () => onNavigate?.('/script-tags/new'), className: "bg-primary text-primary-foreground hover:bg-primary/90 mt-4 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors", children: [_jsx(Plus, { className: "h-4 w-4" }), "Add Your First Tag"] })] })) : (_jsx("div", { className: "border-border bg-card overflow-hidden rounded-lg border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-border bg-muted border-b", children: [_jsx("th", { className: "text-muted-foreground px-4 py-3 text-left font-medium", children: "Name" }), _jsx("th", { className: "text-muted-foreground px-4 py-3 text-left font-medium", children: "Placement" }), _jsx("th", { className: "text-muted-foreground px-4 py-3 text-left font-medium", children: "Scope" }), _jsx("th", { className: "text-muted-foreground px-4 py-3 text-center font-medium", children: "Priority" }), _jsx("th", { className: "text-muted-foreground px-4 py-3 text-center font-medium", children: "Enabled" })] }) }), _jsx("tbody", { children: tags.map((tag) => (_jsxs("tr", { className: "border-border hover:bg-muted border-b transition-colors last:border-0", children: [_jsx("td", { className: "px-4 py-3", children: _jsx("button", { type: "button", onClick: () => onNavigate?.(`/script-tags/${tag.id}`), className: "text-primary hover:text-primary/80 font-medium hover:underline", children: tag.name }) }), _jsx("td", { className: "px-4 py-3", children: _jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLACEMENT_COLORS[tag.placement] ?? 'bg-muted text-foreground'}`, children: PLACEMENT_LABELS[tag.placement] ?? tag.placement }) }), _jsx("td", { className: "text-muted-foreground px-4 py-3", children: scopeLabel(tag) }), _jsx("td", { className: "text-muted-foreground px-4 py-3 text-center font-mono", children: tag.priority }), _jsx("td", { className: "px-4 py-3 text-center", children: _jsx("button", { type: "button", onClick: () => toggleEnabled(tag), disabled: togglingId === tag.id, className: `relative h-6 w-11 shrink-0 rounded-full transition-colors ${tag.enabled ? 'bg-primary' : 'bg-switch-background'}`, "aria-pressed": tag.enabled, children: _jsx("span", { className: `bg-card absolute top-0.5 block h-5 w-5 rounded-full transition-transform ${tag.enabled ? 'translate-x-[22px]' : 'translate-x-0.5'}` }) }) })] }, tag.id))) })] }) }))] }));
}
//# sourceMappingURL=ScriptTags.js.map