'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as Dialog from '@radix-ui/react-dialog';
import { AlertTriangle, Check, Loader2, Lock } from 'lucide-react';
import { useId } from 'react';
/**
 * The canonical Settings section card: a bordered `bg-card` surface with a
 * header (title + optional description) and an optional right-aligned actions
 * slot. This is the single source of truth for the Settings design language —
 * every tab's sections render through it so spacing, padding, typography, and
 * the title/description rhythm stay identical across General, Appearance,
 * Security, SEO, AI, and beyond. Match the Appearance tab exactly: `p-6`,
 * `text-lg` medium title, `text-sm` muted description.
 */
export function SettingsCard({ title, description, actions, children, className, headingLevel: Heading = 'h3', }) {
    const headingId = useId();
    return (_jsxs("section", { "aria-labelledby": headingId, className: `border-border bg-card rounded-lg border p-6 ${className ?? ''}`, children: [_jsxs("header", { className: "mb-4 flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Heading, { id: headingId, className: "text-foreground text-lg font-medium", children: title }), description && _jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: description })] }), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] }), children] }));
}
/**
 * A sub-section inside a {@link SettingsCard}: a top divider plus a
 * `text-base` medium label and optional description. Use for grouped controls
 * within a single card (e.g. "Admin branding" under "Branding").
 */
export function SettingsSubsection({ title, description, children, className, }) {
    return (_jsxs("div", { className: `border-border border-t pt-4 ${className ?? ''}`, children: [_jsx("div", { className: "text-foreground text-base font-medium", children: title }), description && _jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: description }), children] }));
}
const SOURCE_LABEL = {
    config: 'Config-managed',
    environment: 'Environment-managed',
    database: 'Editable',
    plugin: 'Plugin setting',
    computed: 'Computed',
};
/** Small badge showing where a setting's value comes from. */
export function SettingsSourceBadge({ meta }) {
    if (!meta || (meta.source === 'database' && meta.editable))
        return null;
    const locked = !meta.editable;
    return (_jsxs("span", { className: "text-muted-foreground border-border bg-muted inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs", title: meta.reason, children: [locked && _jsx(Lock, { size: 11, "aria-hidden": "true" }), SOURCE_LABEL[meta.source]] }));
}
/** A labelled switch row with description, used for the SEO defaults. */
export function SettingsToggleRow({ label, description, checked, onChange, disabled = false, badge, }) {
    return (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-foreground text-base font-medium", children: label }), badge] }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: description })] }), _jsx("button", { type: "button", role: "switch", "aria-checked": checked, "aria-label": label, disabled: disabled, onClick: () => onChange(!checked), className: `focus-visible:ring-ring relative mt-0.5 h-6 w-11 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${checked ? 'bg-brand' : 'bg-switch-background'}`, children: _jsx("span", { className: `absolute top-0.5 block h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${checked ? 'translate-x-[22px]' : 'translate-x-0.5'}` }) })] }));
}
/** Aggregated validation messages shown above the cards. */
export function SettingsValidationSummary({ issues }) {
    if (issues.length === 0)
        return null;
    const errors = issues.filter((i) => i.severity === 'error');
    const warnings = issues.filter((i) => i.severity === 'warning');
    const isError = errors.length > 0;
    return (_jsxs("div", { role: "alert", "aria-live": "polite", className: `flex items-start gap-3 rounded-lg border p-3 text-sm ${isError
            ? 'border-destructive/30 bg-destructive/10 text-destructive'
            : 'border-warning/30 bg-warning/10 text-warning'}`, children: [_jsx(AlertTriangle, { size: 16, className: "mt-0.5 shrink-0", "aria-hidden": "true" }), _jsx("div", { className: "space-y-1", children: [...errors, ...warnings].map((issue, i) => (_jsx("p", { children: issue.message }, `${issue.field}-${i}`))) })] }));
}
/** Sticky footer with Reset + Save, gated on dirty state. */
export function SettingsSaveBar({ dirty, canEdit, hasErrors, saveState, onSave, onReset, }) {
    const saving = saveState === 'saving';
    return (_jsxs("div", { className: "border-border bg-background/80 sticky bottom-0 z-10 flex items-center justify-end gap-4 border-t py-3 backdrop-blur", children: [saveState === 'success' && !dirty && (_jsxs("span", { className: "text-success flex items-center gap-1.5 text-sm", "aria-live": "polite", children: [_jsx(Check, { size: 16, "aria-hidden": "true" }), " Saved"] })), _jsx("button", { type: "button", onClick: onReset, disabled: !dirty || saving, className: "text-muted-foreground hover:text-foreground rounded-md px-3 py-2 text-base transition-colors disabled:cursor-not-allowed disabled:opacity-40", children: "Reset" }), _jsxs("button", { type: "button", onClick: onSave, disabled: !canEdit || !dirty || hasErrors || saving, className: "bg-brand text-brand-foreground focus-visible:ring-ring inline-flex items-center gap-2 rounded-md px-5 py-2 text-base font-medium transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", children: [saving && _jsx(Loader2, { size: 16, className: "animate-spin", "aria-hidden": "true" }), saving ? 'Saving…' : 'Save Changes'] })] }));
}
/** Confirmation dialog for dangerous indexing changes. */
export function ConfirmDangerousSettingDialog({ open, title, description, confirmLabel = 'Continue', onConfirm, onCancel, }) {
    return (_jsx(Dialog.Root, { open: open, onOpenChange: (o) => !o && onCancel(), children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/50" }), _jsxs(Dialog.Content, { className: "bg-card text-card-foreground fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg p-6 shadow-lg", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx("span", { className: "bg-warning/15 text-warning flex h-9 w-9 items-center justify-center rounded-full", children: _jsx(AlertTriangle, { size: 20, "aria-hidden": "true" }) }), _jsx(Dialog.Title, { className: "text-foreground text-lg font-medium", children: title })] }), _jsx(Dialog.Description, { className: "text-muted-foreground mb-5 text-sm", children: description }), _jsxs("div", { className: "flex items-center justify-end gap-3", children: [_jsx("button", { type: "button", onClick: onCancel, className: "border-border text-foreground hover:bg-accent rounded-md border px-4 py-2 text-base transition-colors", children: "Cancel" }), _jsx("button", { type: "button", onClick: onConfirm, className: "bg-destructive text-destructive-foreground rounded-md px-4 py-2 text-base font-medium transition-opacity hover:opacity-90", children: confirmLabel })] })] })] }) }));
}
//# sourceMappingURL=components.js.map