"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { cn } from "@stigmer/theme";
// ---------------------------------------------------------------------------
// Chip — the read-only badge and the editable trigger share this base so the
// two states are visually identical apart from the trigger's caret affordance.
// ---------------------------------------------------------------------------
/** Base classes for the visibility chip (badge + selector trigger). */
export const VISIBILITY_CHIP_CLASS = "inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground";
/**
 * A single visibility level rendered as a left-aligned row: tone icon,
 * label, one-line description, and a check when current. Shared by the
 * {@link VisibilitySelector} popover and its create-mode inline list so
 * option presentation has exactly one source.
 */
export const VisibilityOptionRow = forwardRef(function VisibilityOptionRow({ option, isSelected, role, isHighlighted, disabled, tabIndex, onSelect, onMouseEnter, onKeyDown, }, ref) {
    const selectionAttr = role === "radio"
        ? { "aria-checked": isSelected }
        : { "aria-selected": isSelected };
    return (_jsxs("button", { ref: ref, type: "button", role: role, ...selectionAttr, tabIndex: tabIndex, disabled: disabled, onClick: onSelect, onMouseEnter: onMouseEnter, onKeyDown: onKeyDown, className: cn("flex w-full items-start gap-2 rounded-md px-2.5 py-2 text-left transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50", isHighlighted ? "bg-accent text-foreground" : "hover:bg-accent-hover"), children: [_jsx(VisibilityIcon, { tone: option.tone, className: "mt-0.5 size-3.5 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block text-xs font-medium text-foreground", children: option.label }), _jsx("span", { className: "block text-[0.65rem] leading-snug text-muted-foreground", children: option.description })] }), isSelected && _jsx(CheckIcon, { className: "mt-0.5 size-3.5 shrink-0 text-primary" })] }));
});
// ---------------------------------------------------------------------------
// Tone styling — one row per visibility tone, keyed by VisibilityLevelOption
// ---------------------------------------------------------------------------
/** Selected-segment / active-tone treatment (also used by the inline confirm). */
export const SELECTED_STYLES = {
    private: "bg-amber-50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
    org: "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
    platform: "bg-violet-100 text-violet-800 dark:bg-violet-900/40 dark:text-violet-300",
    public: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300",
};
/** Inline-confirm (escalation prompt) treatment, keyed by tone. */
export const PROMPT_STYLES = {
    // Private never escalates, but the row keeps the Record total.
    private: {
        container: "border-amber-200 bg-amber-50 dark:border-amber-800/50 dark:bg-amber-950/30",
        text: "text-amber-800 dark:text-amber-200",
        confirm: "bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-500",
        cancel: "text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100",
    },
    org: {
        container: "border-blue-200 bg-blue-50 dark:border-blue-800/50 dark:bg-blue-950/30",
        text: "text-blue-800 dark:text-blue-200",
        confirm: "bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500",
        cancel: "text-blue-700 hover:text-blue-900 dark:text-blue-300 dark:hover:text-blue-100",
    },
    platform: {
        container: "border-violet-200 bg-violet-50 dark:border-violet-800/50 dark:bg-violet-950/30",
        text: "text-violet-800 dark:text-violet-200",
        confirm: "bg-violet-600 hover:bg-violet-700 dark:bg-violet-600 dark:hover:bg-violet-500",
        cancel: "text-violet-700 hover:text-violet-900 dark:text-violet-300 dark:hover:text-violet-100",
    },
    public: {
        container: "border-emerald-200 bg-emerald-50 dark:border-emerald-800/50 dark:bg-emerald-950/30",
        text: "text-emerald-800 dark:text-emerald-200",
        confirm: "bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-600 dark:hover:bg-emerald-500",
        cancel: "text-emerald-700 hover:text-emerald-900 dark:text-emerald-300 dark:hover:text-emerald-100",
    },
};
// ---------------------------------------------------------------------------
// Icons — inline SVGs following the SDK pattern (no icon library dependency)
// ---------------------------------------------------------------------------
/** Icon for a visibility tone; shared by the row, badge, and trigger. */
export function VisibilityIcon({ tone, className, }) {
    switch (tone) {
        case "org":
            return _jsx(UsersIcon, { className: className });
        case "platform":
            return _jsx(BuildingsIcon, { className: className });
        case "public":
            return _jsx(GlobeIcon, { className: className });
        default:
            return _jsx(LockIcon, { className: className });
    }
}
function LockIcon({ className }) {
    return (_jsxs("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "3.5", y: "7", width: "9", height: "7", rx: "1.5" }), _jsx("path", { d: "M5.5 7V5a2.5 2.5 0 0 1 5 0v2" })] }));
}
function UsersIcon({ className }) {
    return (_jsxs("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "6", cy: "5", r: "2.5" }), _jsx("path", { d: "M2 13c0-2.21 1.79-4 4-4s4 1.79 4 4" }), _jsx("circle", { cx: "11.5", cy: "5.5", r: "2" }), _jsx("path", { d: "M14 13c0-1.66-1.12-3-2.5-3-.5 0-1 .14-1.4.4" })] }));
}
function BuildingsIcon({ className }) {
    return (_jsxs("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M2 14V4.5L6.5 2v12" }), _jsx("path", { d: "M6.5 6.5 14 8.5V14" }), _jsx("path", { d: "M2 14h12" }), _jsx("path", { d: "M4.25 6h.01M4.25 8.5h.01M4.25 11h.01M10.5 10.5h.01M10.5 12.5h.01" })] }));
}
function GlobeIcon({ className }) {
    return (_jsxs("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "6" }), _jsx("path", { d: "M2 8h12" }), _jsx("path", { d: "M8 2c1.66 1.46 2.6 3.63 2.6 6s-.94 4.54-2.6 6c-1.66-1.46-2.6-3.63-2.6-6s.94-4.54 2.6-6Z" })] }));
}
function CheckIcon({ className }) {
    return (_jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M3 8.5 6.5 12 13 4.5" }) }));
}
//# sourceMappingURL=VisibilityOptionRow.js.map