import type { ReactNode } from 'react';
import { Evidence } from '@/components/evidence/evidence';
import { cn } from '@/lib/cn';
import { fmtValue } from '@/lib/format';
import { propertyLabel, URL_KEYS } from '@/lib/site';
import type { Provenance } from '@/lib/types';
import { ProvenanceInline } from './provenance';
import { Missing } from './unavailable';

export type KVRow = { key: string; label?: ReactNode; value?: ReactNode; raw?: unknown; hint?: ReactNode; unit?: string | null };

/**
 * Dense spec list (<dl>): label column + value + optional per-field provenance. Pass `provenance` (from EntityDetail)
 * to render "Source · tier · observed" under each value when known. Values fall back to `fmtValue(raw, key)`.
 * Pass `slug` (+ optional `entity`) to make every value with provenance an **evidence trigger** that opens the drawer
 * (`components/evidence`). Existing call sites without `slug` render exactly as before.
 */
export function KeyValue({
  rows,
  provenance,
  className,
  dense = false,
  showMissing = false,
  slug,
  entity,
}: {
  rows: KVRow[];
  provenance?: Provenance;
  className?: string;
  dense?: boolean;
  showMissing?: boolean;
  slug?: string;
  entity?: { name?: string; entity_type?: string } | null;
}) {
  const shown = rows.filter((r) => showMissing || r.value !== undefined || (r.raw !== undefined && r.raw !== null && r.raw !== ''));
  if (shown.length === 0) return <p className="text-sm text-ink-3">No structured attributes yet.</p>;
  return (
    <dl className={cn('kv', dense && '[&>div]:py-1.5', className)}>
      {shown.map((r) => {
        const p = provenance?.[r.key];
        const raw = r.raw;
        let value: ReactNode = r.value;
        let display: string | undefined;
        if (value === undefined) {
          if (raw === null || raw === undefined || raw === '') value = <Missing />;
          else if (URL_KEYS.has(r.key) && typeof raw === 'string' && /^https?:\/\//.test(raw))
            value = (
              <a href={raw} className="link break-all" rel="noopener noreferrer" target="_blank">
                {raw.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '')}
              </a>
            );
          else {
            display = fmtValue(raw, r.key);
            value = <span className={typeof raw === 'number' ? 'tnum' : undefined}>{display}</span>;
          }
        }
        const canOpen = !!slug && !!p && raw !== null && raw !== undefined && raw !== '' && !(URL_KEYS.has(r.key) && typeof raw === 'string');
        return (
          <div key={r.key}>
            <dt>{r.label ?? propertyLabel(r.key)}</dt>
            <dd>
              <div className="text-ink">
                {canOpen ? (
                  <Evidence slug={slug as string} property={r.key} value={raw} display={display} unit={r.unit ?? p?.unit ?? null} fallback={p} entity={entity ?? null}>
                    {value}
                  </Evidence>
                ) : (
                  value
                )}
              </div>
              {r.hint && <div className="mt-0.5 text-xs text-ink-3">{r.hint}</div>}
              {p && <ProvenanceInline p={p} className="mt-0.5" slug={slug} property={r.key} value={raw} entity={entity ?? null} />}
            </dd>
          </div>
        );
      })}
    </dl>
  );
}