'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Entry detail pane — lightweight read-only inspector shown beside the
 * collection documents table (design's Entries split-pane, 400px). Surfaces
 * the entry's key fields, status, and timestamps; the primary action opens
 * the existing full editor route. Not an editor — editing stays in the
 * dedicated editor views.
 */
import { ExternalLink } from 'lucide-react';
import { InspectorPaneBody, InspectorPaneFooter, InspectorPaneHeader, InspectorPaneSection, } from '../ui/InspectorPane.js';
import { StatusBadge } from '../ui/StatusBadge.js';
const SKIPPED_FIELD_TYPES = new Set(['richText', 'blocks', 'json', 'media', 'relationship']);
const MAX_FIELDS = 8;
function statusTone(status) {
    switch (status?.toUpperCase()) {
        case 'PUBLISHED':
            return 'success';
        case 'SCHEDULED':
            return 'warning';
        case 'ARCHIVED':
            return 'muted';
        default:
            return 'neutral';
    }
}
function formatDateTime(value) {
    if (typeof value !== 'string' || !value)
        return '—';
    const date = new Date(value);
    if (Number.isNaN(date.getTime()))
        return '—';
    return date.toLocaleDateString(undefined, {
        month: 'short',
        day: 'numeric',
        year: 'numeric',
        hour: 'numeric',
        minute: '2-digit',
    });
}
/** Human-readable display value for a scalar-ish field, or null to skip. */
function displayValue(raw, field) {
    if (raw == null || raw === '')
        return '';
    if (typeof raw === 'boolean')
        return raw ? 'Yes' : 'No';
    if (typeof raw === 'number')
        return String(raw);
    if (typeof raw === 'string') {
        const opt = field.options?.find((o) => o.value === raw);
        return opt?.label ?? raw;
    }
    if (Array.isArray(raw)) {
        const tags = raw
            .map((item) => typeof item === 'string'
            ? item
            : item && typeof item === 'object'
                ? Object.values(item).find((v) => typeof v === 'string')
                : undefined)
            .filter((v) => Boolean(v));
        if (tags.length > 0)
            return tags.join(', ');
        return `${raw.length} item${raw.length === 1 ? '' : 's'}`;
    }
    return null;
}
/** Key fields worth showing in the pane: labelled scalars from the config. */
function keyFields(fields, data) {
    if (!fields || typeof fields !== 'object')
        return [];
    const out = [];
    for (const [name, field] of Object.entries(fields)) {
        if (!field || field.hidden)
            continue;
        if (field.type && SKIPPED_FIELD_TYPES.has(field.type))
            continue;
        const value = displayValue(data[name], field);
        if (value === null)
            continue;
        out.push({ name, label: field.label ?? name, value });
        if (out.length >= MAX_FIELDS)
            break;
    }
    return out;
}
export function EntryDetailPane({ doc, collection, singularLabel, onClose, onOpenEditor, }) {
    const title = doc.title || doc.name || `#${doc.id}`;
    const data = (doc.data ?? {});
    const fields = keyFields(collection?.fields, data);
    return (_jsxs(_Fragment, { children: [_jsxs(InspectorPaneHeader, { onClose: onClose, closeLabel: `Close ${singularLabel} details`, children: [_jsx("div", { className: "truncate text-[13.5px] font-semibold text-[var(--txt)]", children: title }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [_jsx(StatusBadge, { tone: statusTone(doc.status), children: doc.status ?? 'DRAFT' }), _jsx("span", { className: "text-[11px] text-[var(--muted)]", children: singularLabel })] })] }), _jsxs(InspectorPaneBody, { children: [_jsx(InspectorPaneSection, { title: "Fields", children: fields.length === 0 ? (_jsx("p", { className: "text-[12px] text-[var(--muted)]", children: "No previewable fields." })) : (_jsx("dl", { children: fields.map((f) => (_jsxs("div", { className: "mb-2.5 last:mb-0", children: [_jsx("dt", { className: "text-[10.5px] font-semibold tracking-[0.5px] text-[var(--muted)] uppercase", children: f.label }), f.value ? (_jsx("dd", { className: "mt-0.5 text-[12.5px] break-words text-[var(--txt)]", children: f.value })) : (_jsx("dd", { className: "mt-0.5 text-[12.5px] text-[var(--muted)] italic", children: "Not provided" }))] }, f.name))) })) }), _jsxs(InspectorPaneSection, { title: "Record", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 py-1 text-[12px]", children: [_jsx("span", { className: "text-[var(--muted)]", children: "Created" }), _jsx("span", { className: "text-[var(--sub)]", children: formatDateTime(doc.createdAt) })] }), _jsxs("div", { className: "flex items-center justify-between gap-3 py-1 text-[12px]", children: [_jsx("span", { className: "text-[var(--muted)]", children: "Updated" }), _jsx("span", { className: "text-[var(--sub)]", children: formatDateTime(doc.updatedAt) })] }), _jsxs("div", { className: "flex items-center justify-between gap-3 py-1 text-[12px]", children: [_jsx("span", { className: "text-[var(--muted)]", children: "ID" }), _jsx("span", { className: "font-mono text-[11px] text-[var(--muted)]", children: String(doc.id) })] })] })] }), _jsx(InspectorPaneFooter, { children: _jsxs("button", { type: "button", onClick: onOpenEditor, className: "bg-primary text-primary-foreground flex w-full items-center justify-center gap-1.5 rounded-[7px] px-3 py-2 text-[13px] font-semibold transition-colors duration-[var(--motion-fast)] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none", children: [_jsx(ExternalLink, { size: 14, "aria-hidden": true }), "Open full editor"] }) })] }));
}
//# sourceMappingURL=EntryDetailPane.js.map