'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Reusable styled sub-components for editor panels
 */
import React, { useState, useRef } from 'react';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import { cn } from '../../../utils/cn.js';
import { useEditorTheme } from './context.js';
import { STATUS_ICONS, TAB_ICONS } from './icons.js';
/* ---------- Width helpers ---------- */
const WIDTH_CLASS = {
    full: 'w-full',
    lg: 'w-full max-w-lg',
    md: 'w-full max-w-md',
};
/** Wraps a field area with padding and a bottom divider line */
export function EditorSection({ children, className, last = false }) {
    return (_jsx("div", { className: cn('py-5 first:pt-0 space-y-2', !last && 'border-b border-border/60', className), children: children }));
}
export function EditorLabel({ children, icon: Icon, required, className, htmlFor }) {
    const theme = useEditorTheme();
    const show_icon = theme.label_icons && Icon;
    return (_jsxs("label", { htmlFor: htmlFor, className: cn('flex items-center gap-1.5', theme.label_style === 'uppercase'
            ? 'text-xs font-semibold uppercase tracking-wide text-muted-foreground'
            : 'text-sm font-medium', className), children: [show_icon && _jsx(Icon, { className: "h-3.5 w-3.5 flex-shrink-0" }), children, required && _jsx("span", { className: "text-destructive", children: "*" })] }));
}
export const EditorInput = React.forwardRef(({ className, field_width, ...props }, ref) => {
    const theme = useEditorTheme();
    const width = field_width ?? theme.max_field_width;
    return (_jsx("input", { ref: ref, className: cn(WIDTH_CLASS[width], 'px-3 py-2 border rounded-md text-sm bg-background', 'focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary', 'transition-colors', 'disabled:bg-muted disabled:cursor-not-allowed', className), ...props }));
});
EditorInput.displayName = 'EditorInput';
export const EditorTextArea = React.forwardRef(({ className, field_width, ...props }, ref) => {
    const theme = useEditorTheme();
    const width = field_width ?? theme.max_field_width;
    return (_jsx("textarea", { ref: ref, className: cn(WIDTH_CLASS[width], 'px-3 py-2 border rounded-md text-sm bg-background resize-y', 'focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary', 'transition-colors', 'disabled:bg-muted disabled:cursor-not-allowed', className), ...props }));
});
EditorTextArea.displayName = 'EditorTextArea';
/* ---------- EditorSelect ---------- */
/** Extract option values/labels from <option> children */
function extract_options(children) {
    const options = [];
    React.Children.forEach(children, (child) => {
        if (!React.isValidElement(child))
            return;
        if (child.type === 'option') {
            const props = child.props;
            options.push({
                value: String(props.value ?? ''),
                label: String(props.children ?? props.value ?? ''),
                disabled: props.disabled,
            });
        }
    });
    return options;
}
export const EditorSelect = React.forwardRef(({ className, field_width, children, value, onChange, disabled, ...props }, ref) => {
    const theme = useEditorTheme();
    const width = field_width ?? theme.max_field_width;
    const [open, set_open] = useState(false);
    const trigger_ref = useRef(null);
    const options = extract_options(children);
    const selected = options.find(o => o.value === String(value ?? ''));
    const display_label = selected?.label ?? '';
    const handle_select = (opt_value) => {
        if (onChange) {
            // Synthesise a change event compatible with e.target.value
            const synthetic = { target: { value: opt_value } };
            onChange(synthetic);
        }
        set_open(false);
    };
    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: set_open, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, disabled: disabled, children: _jsxs("button", { ref: trigger_ref, type: "button", className: cn(WIDTH_CLASS[width], 'flex items-center justify-between', 'px-3 py-2 border rounded-md text-sm bg-background text-left', 'focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary', 'transition-colors', 'disabled:opacity-50 disabled:cursor-not-allowed', className), children: [_jsx("span", { className: cn('truncate', !selected?.value && 'text-muted-foreground'), children: display_label || '\u00A0' }), _jsx("svg", { className: "h-4 w-4 opacity-50 flex-shrink-0 ml-2", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }) }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { align: "start", sideOffset: 4, collisionPadding: 8, className: "z-50 min-w-[var(--radix-popover-trigger-width)] max-h-[300px] overflow-y-auto rounded-md border bg-popover shadow-md p-1", style: { backgroundColor: 'hsl(var(--popover, 0 0% 100%))' }, children: options.map((opt) => (_jsxs("button", { type: "button", disabled: opt.disabled, className: cn('w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-sm text-left', 'hover:bg-accent hover:text-accent-foreground', 'focus:bg-accent focus:text-accent-foreground focus:outline-none', 'disabled:pointer-events-none disabled:opacity-50', opt.value === String(value ?? '') && 'bg-accent/50 font-medium'), onClick: () => handle_select(opt.value), children: [_jsx("span", { className: "w-4 flex-shrink-0 text-center", children: opt.value === String(value ?? '') ? '✓' : '' }), _jsx("span", { className: "truncate", children: opt.label })] }, opt.value))) }) })] }));
});
EditorSelect.displayName = 'EditorSelect';
export function EditorTabs({ tabs, active_tab, on_tab_change, className }) {
    const theme = useEditorTheme();
    if (theme.tab_style === 'underline') {
        return (_jsx("div", { className: cn('border-b flex', className), children: tabs.map(tab => {
                const Icon = tab.icon ? TAB_ICONS[tab.icon] : null;
                return (_jsxs("button", { onClick: () => on_tab_change(tab.id), className: cn('px-4 py-2.5 text-sm font-medium border-b-2 transition-colors flex items-center gap-1.5', active_tab === tab.id
                        ? 'border-primary text-primary'
                        : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/30'), children: [theme.label_icons && Icon && _jsx(Icon, { className: "h-3.5 w-3.5" }), tab.label] }, tab.id));
            }) }));
    }
    // Pill style (default)
    return (_jsx("div", { className: cn('border-b flex gap-1 p-1.5 bg-muted/30', className), children: tabs.map(tab => {
            const Icon = tab.icon ? TAB_ICONS[tab.icon] : null;
            return (_jsxs("button", { onClick: () => on_tab_change(tab.id), className: cn('px-3 py-1.5 text-sm font-medium rounded-md transition-all flex items-center gap-1.5', active_tab === tab.id
                    ? 'bg-background text-foreground shadow-sm'
                    : 'text-muted-foreground hover:text-foreground hover:bg-background/50'), children: [theme.label_icons && Icon && _jsx(Icon, { className: "h-3.5 w-3.5" }), tab.label] }, tab.id));
        }) }));
}
export function EditorHeader({ children, className }) {
    const theme = useEditorTheme();
    const style_class = theme.header_style === 'gradient'
        ? 'border-l-4 border-l-primary/60 bg-gradient-to-r from-primary/5 to-transparent'
        : theme.header_style === 'accent'
            ? 'border-l-4 border-l-primary/60'
            : '';
    return (_jsx("div", { className: cn('p-3 border-b', style_class, className), children: children }));
}
export function SwitchCard({ icon: Icon, label, description, children, className }) {
    const theme = useEditorTheme();
    const show_icon = theme.label_icons && Icon;
    return (_jsxs("div", { className: cn('flex items-center justify-between p-3 rounded-lg border bg-muted/10 hover:bg-muted/20 transition-colors', className), children: [_jsxs("div", { className: "flex-1 mr-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [show_icon && _jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground flex-shrink-0" }), _jsx("span", { className: "text-sm font-medium", children: label })] }), description && (_jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: description }))] }), children] }));
}
export function StatusIndicator({ saved, className }) {
    const SavedIcon = STATUS_ICONS.saved;
    const UnsavedIcon = STATUS_ICONS.unsaved;
    return (_jsx("div", { className: cn('flex items-center gap-1.5 text-xs', saved ? 'text-emerald-600' : 'text-amber-600', className), children: saved
            ? _jsxs(_Fragment, { children: [_jsx(SavedIcon, { className: "h-3.5 w-3.5" }), " Saved"] })
            : _jsxs(_Fragment, { children: [_jsx(UnsavedIcon, { className: "h-3.5 w-3.5" }), " Unsaved changes"] }) }));
}
export function EditorHelpText({ children, className }) {
    return (_jsx("p", { className: cn('text-xs text-muted-foreground', className), children: children }));
}
//# sourceMappingURL=components.js.map