/**
 * FieldAuditPanel — designed to be dropped into the
 * `field_action_components.row_below` slot. Renders the per-field history
 * list when the icon is toggled open.
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useFieldAuditOptional } from './context.js';
function format_value(value) {
    if (value === undefined)
        return '—';
    if (value === null)
        return 'null';
    if (typeof value === 'string')
        return value === '' ? '""' : `"${value}"`;
    if (typeof value === 'number' || typeof value === 'boolean')
        return String(value);
    try {
        return JSON.stringify(value);
    }
    catch {
        return String(value);
    }
}
function format_time(at) {
    const date = new Date(at);
    const hh = String(date.getHours()).padStart(2, '0');
    const mm = String(date.getMinutes()).padStart(2, '0');
    const ss = String(date.getSeconds()).padStart(2, '0');
    return `${hh}:${mm}:${ss}`;
}
function source_label(source) {
    switch (source) {
        case 'manual':
            return 'edit';
        case 'clarification':
            return 'clarification';
    }
}
function EntryRow({ entry }) {
    return (_jsxs("li", { className: "cls_field_audit_entry flex items-baseline gap-2 px-2 py-1 text-[11px] font-mono", children: [_jsx("span", { className: "text-amber-700/70 shrink-0", children: format_time(entry.at) }), _jsx("span", { className: "text-amber-900 shrink-0 uppercase tracking-wide text-[10px]", children: source_label(entry.source) }), entry.user && (_jsx("span", { className: "text-slate-600 shrink-0", children: entry.user })), _jsxs("span", { className: "text-slate-500 truncate", children: [format_value(entry.prev_value), " ", _jsx("span", { "aria-hidden": true, children: "\u2192" }), ' ', _jsx("span", { className: "text-emerald-700", children: format_value(entry.new_value) })] })] }));
}
export function FieldAuditPanel({ field }) {
    const audit = useFieldAuditOptional();
    if (!audit)
        return null;
    if (!audit.expanded.has(field.id))
        return null;
    const list = audit.entries.get(field.id) ?? [];
    if (list.length === 0)
        return null;
    return (_jsxs("div", { "data-testid": `field_audit_panel_${field.id}`, className: "cls_field_audit_panel mx-3 mb-2 rounded-md border border-amber-200 bg-amber-50/60", children: [_jsxs("div", { className: "flex items-center justify-between px-2 py-1 border-b border-amber-200/60", children: [_jsxs("span", { className: "text-[10px] uppercase tracking-wide text-amber-800", children: ["Field audit \u00B7 ", list.length, " change", list.length === 1 ? '' : 's'] }), _jsx("button", { type: "button", onClick: () => audit.clear_field(field.id), "aria-label": `Clear audit history for ${field.id}`, className: "text-[10px] text-amber-700/70 hover:text-red-600", children: "Clear" })] }), _jsx("ol", { className: "divide-y divide-amber-100", children: list.map((entry) => (_jsx(EntryRow, { entry: entry }, entry.id))) })] }));
}
//# sourceMappingURL=field_audit_panel.js.map