import type { FieldChange } from "@/lib/api";
import { fmtPctDelta } from "@/lib/format";

/**
 * WHAT CHANGED — field-level before → after table (spec §21, §78). Pure server-renderable component.
 */
export function FieldChanges({ items, compact = false, max }: { items: FieldChange[] | null | undefined; compact?: boolean; max?: number }) {
  if (!items?.length) return null;
  const rows = max ? items.slice(0, max) : items;
  return (
    <div className={`overflow-hidden rounded-md border border-line ${compact ? "text-[12px]" : "text-[12.5px]"}`}>
      <table className="w-full">
        <tbody className="divide-y divide-line">
          {rows.map((f, i) => (
            <tr key={i} className="align-top">
              <td className={`${compact ? "px-2 py-1" : "px-3 py-1.5"} w-[34%] text-fg-muted`}>
                <span className="block truncate" title={f.label}>{f.label}</span>
                <span className="label !text-[9.5px] !tracking-wider">{f.kind}</span>
              </td>
              <td className={`${compact ? "px-2 py-1" : "px-3 py-1.5"} font-mono tabular`}>
                <span className="diff-line-del rounded px-1 break-words">{f.before ?? "∅"}</span>
                <span className="mx-1.5 text-fg-subtle">→</span>
                <span className="diff-line-add rounded px-1 break-words">{f.after ?? "∅"}</span>
                {f.deltaPct !== null && f.deltaPct !== undefined && <span className={`ml-2 font-semibold ${f.deltaPct > 0 ? "text-high" : "text-signal"}`}>{fmtPctDelta(f.deltaPct)}</span>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      {max && items.length > max && <div className="border-t border-line px-3 py-1 text-[11px] text-fg-subtle">+{items.length - max} more field change{items.length - max === 1 ? "" : "s"}</div>}
    </div>
  );
}

/** One-line inline version for feed rows / drawer headers. */
export function FieldChangeInline({ items, max = 2 }: { items: FieldChange[] | null | undefined; max?: number }) {
  if (!items?.length) return null;
  return (
    <span className="inline-flex flex-wrap items-center gap-x-2 font-mono text-[11px] text-fg-muted tabular">
      {items.slice(0, max).map((f, i) => (
        <span key={i} className="inline-flex items-center gap-1 whitespace-nowrap">
          <span className="text-fg-subtle">{f.label.length > 22 ? f.label.slice(0, 21) + "…" : f.label}</span>
          <span className="diff-line-del rounded px-0.5">{f.before ?? "∅"}</span>
          <span className="text-fg-subtle">→</span>
          <span className="diff-line-add rounded px-0.5">{f.after ?? "∅"}</span>
          {f.deltaPct !== null && f.deltaPct !== undefined && <span className={f.deltaPct > 0 ? "text-high" : "text-signal"}>{fmtPctDelta(f.deltaPct)}</span>}
        </span>
      ))}
      {items.length > max && <span className="text-fg-subtle">+{items.length - max}</span>}
    </span>
  );
}