/**
 * Universal frontmatter renderer.
 *
 * Introspects ANY entity/doc/page/etc. frontmatter and renders each field with
 * its semantic UI primitive. The schema (CLAUDE-schema-full.md) IS the contract.
 *
 * Grouping strategy (in order):
 *   IDENTITY        canonical_name, *_id, aliases, disambiguation_note
 *   CLASSIFICATION  highest_classification, classification_markings, language_detected, content_classification
 *   METRICS         total_mentions, documents_count, page_count, totals, qualities
 *   RELATIONS       primary_*, key_entities, observed_in_event, observers, related, ...
 *   EVIDENCE        redactions, signatures_observed, tables_detected, images_detected
 *   TEMPORAL        date_start/end, dates, last_*
 *   SPATIAL         coordinates, primary_location
 *   ENRICHMENT      enrichment_status, external_sources, verified_facts
 *   FLAGS           flags
 */
import {
  Users, Building2, MapPin, CalendarRange, Disc3, Plane, Crosshair, BookOpen,
  Files, Image as ImageIcon, Table2, Eye, AlertTriangle, FileSearch,
  FileWarning, Stamp, PenSquare, Bookmark, Hash, Layers, Zap,
} from "lucide-react";
import { FmWikiLink, FmWikiLinkList } from "./fm/wikilink";
import {
  FmConfidence, FmClassification, FmEnrichmentBadge, FmContentChip,
  FmPageTypeChip, FmLanguageChip, FmChip, FmStat, FmCoordinates,
  FmQualityDot, FmFlag, FmTimestamp,
} from "./fm/badges";
import { FmBboxThumb } from "./fm/bbox-thumb";
import { FmExternalSources } from "./fm/external-sources";
import type { AnyFrontmatter, EntityRef, EntitiesExtracted } from "@/lib/fm-types";

interface Props {
  fm: AnyFrontmatter;
  /** Page-derived context — needed for bbox thumbnails to know which PNG to slice. */
  pageCtx?: { docId: string; pageNum: number };
}

function isNonEmptyArray(x: unknown): x is unknown[] {
  return Array.isArray(x) && x.length > 0;
}

/** Maps a class key under entities_extracted to its proper /e/<folder>/<id> namespace. */
const ENTITY_NS: Record<keyof EntitiesExtracted, { label: string; ns: string; icon: React.ReactNode }> = {
  people:        { label: "People",        ns: "people",        icon: <Users size={11} /> },
  organizations: { label: "Organizations", ns: "org",           icon: <Building2 size={11} /> },
  locations:     { label: "Locations",     ns: "loc",           icon: <MapPin size={11} /> },
  events:        { label: "Events",        ns: "event",         icon: <CalendarRange size={11} /> },
  uap_objects:   { label: "UAP Objects",   ns: "uap",           icon: <Disc3 size={11} /> },
  vehicles:      { label: "Vehicles",      ns: "vehicle",       icon: <Plane size={11} /> },
  operations:    { label: "Operations",    ns: "op",            icon: <Crosshair size={11} /> },
  concepts:      { label: "Concepts",      ns: "concept",       icon: <BookOpen size={11} /> },
};

/** Render an entity ref (extracted from a page) as a wiki-link.
 *  Uses the entity's `name` slugified — best-effort. */
function entityRefToLink(ref: EntityRef, ns: string): string {
  const name = ref.name ?? "";
  if (!name) return "";
  const id = name
    .normalize("NFD")
    .replace(/[̀-ͯ]/g, "")
    .toLowerCase()
    .replace(/[^a-z0-9-]+/g, "-")
    .replace(/-+/g, "-")
    .replace(/^-|-$/g, "");
  return `${ns}/${id}`;
}

function Section({
  title, icon, count, children,
}: { title: string; icon?: React.ReactNode; count?: number; children: React.ReactNode }) {
  return (
    <section>
      <h3 className="font-mono text-[10px] text-[#8896aa] uppercase tracking-widest mb-2 flex items-center gap-1.5">
        {icon}
        <span>{title}</span>
        {count !== undefined && <span className="text-[#5a6678]">({count})</span>}
      </h3>
      {children}
    </section>
  );
}

export function FrontmatterPanel({ fm, pageCtx }: Props) {
  const sections: React.ReactNode[] = [];

  /* ── CLASSIFICATION BANNER (top, prominent) ───────────────── */
  const markings = fm.classification_markings ?? [];
  const hasMarkings = markings.length > 0 || fm.highest_classification;
  if (hasMarkings) {
    sections.push(
      <Section key="cls" title="Classification" icon={<Bookmark size={12} className="text-[#ff3344]" />}>
        <div className="flex flex-wrap gap-1.5">
          {fm.highest_classification && (
            <FmClassification level={fm.highest_classification} caveats={undefined} />
          )}
          {markings.map((m, i) => (
            <FmClassification key={i} level={m.level} caveats={m.caveats} />
          ))}
        </div>
      </Section>
    );
  }

  /* ── ALIASES ──────────────────────────────────────────────── */
  if (isNonEmptyArray(fm.aliases)) {
    sections.push(
      <Section key="aliases" title="Aliases" icon={<Hash size={12} />}>
        <div className="flex flex-wrap gap-1">
          {(fm.aliases as string[]).slice(0, 16).map((a, i) => (
            <span key={i} className="font-mono text-[10px] text-[#7fdbff] bg-[rgba(127,219,255,0.06)] border border-[rgba(127,219,255,0.32)] rounded px-1.5 py-0.5">
              {a}
            </span>
          ))}
        </div>
      </Section>
    );
  }

  /* ── DISAMBIGUATION ───────────────────────────────────────── */
  if (fm.disambiguation_note) {
    sections.push(
      <Section key="disamb" title="Disambiguation" icon={<AlertTriangle size={12} className="text-[#f5c542]" />}>
        <p className="text-sm text-[#f5c542] border-l-2 border-[#f5c542] pl-3">{fm.disambiguation_note}</p>
      </Section>
    );
  }

  /* ── CONTENT & PAGE TYPE ──────────────────────────────────── */
  const cc = (fm.content_classification ?? []) as string[];
  const wantsContent = cc.length > 0 || fm.page_type || fm.language_detected || isNonEmptyArray(fm.languages_detected);
  if (wantsContent) {
    sections.push(
      <Section key="content" title="Content" icon={<FileSearch size={12} />}>
        <div className="flex flex-wrap gap-1.5 items-center">
          {fm.page_type && <FmPageTypeChip type={fm.page_type} />}
          {cc.map((k, i) => <FmContentChip key={i} kind={k as Parameters<typeof FmContentChip>[0]["kind"]} />)}
          {fm.language_detected && <FmLanguageChip code={fm.language_detected} />}
          {(fm.languages_detected ?? []).map((l, i) => <FmLanguageChip key={i} code={l} />)}
        </div>
      </Section>
    );
  }

  /* ── METRICS ──────────────────────────────────────────────── */
  const metrics: React.ReactNode[] = [];
  if (typeof fm.total_mentions === "number") metrics.push(<FmStat key="m1" icon={<Hash size={9} />} label="mentions" value={fm.total_mentions} color="cyan" />);
  if (typeof fm.documents_count === "number") metrics.push(<FmStat key="m2" icon={<Files size={9} />} label="documents" value={fm.documents_count} color="cyan" />);
  if (typeof fm.page_count === "number")     metrics.push(<FmStat key="m3" icon={<Files size={9} />} label="pages" value={fm.page_count} color="amber" />);
  if (typeof fm.total_redactions === "number" && fm.total_redactions > 0) metrics.push(<FmStat key="m4" icon={<FileWarning size={9} />} label="redactions" value={fm.total_redactions} color="red" />);
  if (typeof fm.total_signatures === "number" && fm.total_signatures > 0) metrics.push(<FmStat key="m5" icon={<PenSquare size={9} />} label="signatures" value={fm.total_signatures} color="violet" />);
  if (typeof fm.total_tables === "number" && fm.total_tables > 0) metrics.push(<FmStat key="m6" icon={<Table2 size={9} />} label="tables" value={fm.total_tables} color="cyan" />);
  if (typeof fm.total_images === "number" && fm.total_images > 0) metrics.push(<FmStat key="m7" icon={<ImageIcon size={9} />} label="images" value={fm.total_images} color="cyan" />);
  if (typeof fm.ocr_quality_score === "number") metrics.push(<FmStat key="m8" icon={<Zap size={9} />} label="ocr" value={`${Math.round(fm.ocr_quality_score * 100)}%`} color="soft" />);
  if (typeof fm.vision_quality_score === "number") metrics.push(<FmStat key="m9" icon={<Eye size={9} />} label="vision" value={`${Math.round(fm.vision_quality_score * 100)}%`} color="soft" />);
  if (metrics.length > 0) {
    sections.push(
      <Section key="metrics" title="Stats" icon={<Layers size={12} />}>
        <div className="flex flex-wrap gap-2">{metrics}</div>
      </Section>
    );
  }

  /* ── KEY ENTITIES (document-level rollup) ─────────────────── */
  if (fm.key_entities) {
    const ke = fm.key_entities as EntitiesExtracted;
    for (const k of Object.keys(ENTITY_NS) as Array<keyof EntitiesExtracted>) {
      const refs = ke[k] ?? [];
      if (!isNonEmptyArray(refs)) continue;
      const meta = ENTITY_NS[k];
      const links = (refs as EntityRef[]).map((r) => entityRefToLink(r, meta.ns)).filter(Boolean);
      sections.push(
        <Section key={`ke-${k}`} title={`Key ${meta.label}`} icon={meta.icon} count={refs.length}>
          <FmWikiLinkList items={links} size="sm" />
        </Section>
      );
    }
  }

  /* ── ENTITIES EXTRACTED (page-level) ──────────────────────── */
  if (fm.entities_extracted) {
    const ee = fm.entities_extracted as EntitiesExtracted;
    for (const k of Object.keys(ENTITY_NS) as Array<keyof EntitiesExtracted>) {
      const refs = ee[k] ?? [];
      if (!isNonEmptyArray(refs)) continue;
      const meta = ENTITY_NS[k];
      const links = (refs as EntityRef[]).map((r) => entityRefToLink(r, meta.ns)).filter(Boolean);
      sections.push(
        <Section key={`ee-${k}`} title={meta.label} icon={meta.icon} count={refs.length}>
          <FmWikiLinkList items={links} size="xs" />
        </Section>
      );
    }
  }

  /* ── EVIDENCE: redactions ─────────────────────────────────── */
  if (isNonEmptyArray(fm.redactions)) {
    sections.push(
      <Section key="redactions" title="Redactions" icon={<FileWarning size={12} className="text-[#ff3344]" />} count={fm.redactions!.length}>
        <div className="flex flex-wrap gap-2">
          {fm.redactions!.map((r, i) => (
            <div key={i} className="flex items-center gap-2 border border-[rgba(255,51,68,0.32)] bg-[rgba(255,51,68,0.04)] rounded p-1.5">
              <FmBboxThumb bbox={r.bbox} docId={pageCtx?.docId} pageNum={pageCtx?.pageNum} width={64} height={48} label={r.description} />
              <div className="text-[10px] font-mono">
                <div className="text-[#ff3344] font-semibold">{r.code ?? "REDACTED"}</div>
                {r.description && <div className="text-[#8896aa] max-w-[160px] truncate">{r.description}</div>}
              </div>
            </div>
          ))}
        </div>
      </Section>
    );
  }

  /* ── EVIDENCE: signatures ─────────────────────────────────── */
  if (isNonEmptyArray(fm.signatures_observed)) {
    sections.push(
      <Section key="sigs" title="Signatures" icon={<PenSquare size={12} className="text-[#bb6bd9]" />} count={fm.signatures_observed!.length}>
        <div className="flex flex-wrap gap-2">
          {fm.signatures_observed!.map((s, i) => (
            <div key={i} className="flex items-center gap-2 border border-[rgba(187,107,217,0.32)] bg-[rgba(187,107,217,0.04)] rounded p-1.5">
              <FmBboxThumb bbox={s.bbox} docId={pageCtx?.docId} pageNum={pageCtx?.pageNum} width={64} height={48} />
              <div className="text-[10px] font-mono">
                <div className="text-[#bb6bd9] font-semibold">{s.signer_inferred ?? "unknown signer"}</div>
                <FmConfidence band={s.confidence_band} />
                {s.notes && <div className="text-[#8896aa] max-w-[160px] truncate">{s.notes}</div>}
              </div>
            </div>
          ))}
        </div>
      </Section>
    );
  }

  /* ── EVIDENCE: tables ─────────────────────────────────────── */
  if (isNonEmptyArray(fm.tables_detected)) {
    sections.push(
      <Section key="tabs" title="Tables on this page" icon={<Table2 size={12} className="text-[#1e9eb5]" />} count={fm.tables_detected!.length}>
        <div className="flex flex-wrap gap-2">
          {fm.tables_detected!.map((t, i) => (
            <div key={i} className="flex items-center gap-2 border border-[rgba(30,158,181,0.32)] bg-[rgba(30,158,181,0.04)] rounded p-1.5">
              <FmBboxThumb bbox={t.bbox} docId={pageCtx?.docId} pageNum={pageCtx?.pageNum} width={64} height={48} />
              <div className="text-[10px] font-mono">
                {t.table_id ? <FmWikiLink target={`table/${t.table_id}`} size="xs" /> : <span className="text-[#1e9eb5]">inline table</span>}
                <div className="text-[#8896aa] mt-1">
                  {t.col_count_estimate ?? "?"}×{t.row_count_estimate ?? "?"}
                  {t.spans_multi_page && <span className="text-[#f5c542] ml-1">multi-page</span>}
                </div>
                {t.headers_summary && <div className="text-[#5a6678] max-w-[160px] truncate">{t.headers_summary}</div>}
              </div>
            </div>
          ))}
        </div>
      </Section>
    );
  }

  /* ── EVIDENCE: images detected ────────────────────────────── */
  if (isNonEmptyArray(fm.images_detected)) {
    sections.push(
      <Section key="imgs" title="Images on this page" icon={<ImageIcon size={12} className="text-[#ffeb99]" />} count={fm.images_detected!.length}>
        <div className="flex flex-wrap gap-2">
          {fm.images_detected!.map((im, i) => (
            <div key={i} className="flex items-center gap-2 border border-[rgba(255,235,153,0.32)] bg-[rgba(255,235,153,0.04)] rounded p-1.5">
              <FmBboxThumb bbox={im.bbox} docId={pageCtx?.docId} pageNum={pageCtx?.pageNum} width={64} height={64} />
              <div className="text-[10px] font-mono">
                <div className="text-[#ffeb99] font-semibold">{im.image_type ?? "image"}</div>
                {im.caption_ocr && <div className="text-[#8896aa] max-w-[160px]">{im.caption_ocr}</div>}
              </div>
            </div>
          ))}
        </div>
      </Section>
    );
  }

  /* ── UAP OBSERVATION ──────────────────────────────────────── */
  if (fm.uap_observation_fields) {
    const u = fm.uap_observation_fields;
    sections.push(
      <Section key="uap" title="UAP Observation" icon={<Disc3 size={12} className="text-[#ff3344]" />}>
        <div className="flex flex-wrap gap-2">
          {u.shape && <FmChip color="red" icon={<Disc3 size={9} />} label={`shape: ${u.shape}`} />}
          {u.color && <FmChip color="red" label={`color: ${u.color}`} />}
          {u.size_estimate && <FmChip color="red" label={`size: ${u.size_estimate}`} />}
          {u.altitude_ft !== null && u.altitude_ft !== undefined && <FmChip color="cyan" label={`alt: ${u.altitude_ft} ft`} />}
          {u.speed_kts !== null && u.speed_kts !== undefined && <FmChip color="cyan" label={`speed: ${u.speed_kts} kts`} />}
          {u.bearing_deg !== null && u.bearing_deg !== undefined && <FmChip color="cyan" label={`bearing: ${u.bearing_deg}°`} />}
          {u.distance_nm !== null && u.distance_nm !== undefined && <FmChip color="cyan" label={`dist: ${u.distance_nm} nm`} />}
          {u.duration_seconds && <FmChip color="cyan" label={`duration: ${u.duration_seconds}s`} />}
          {u.coordinates && <FmCoordinates lat={u.coordinates.lat ?? undefined} lon={u.coordinates.lon ?? undefined} raw={u.coordinates.raw_text} />}
        </div>
      </Section>
    );
  }

  /* ── UAP-OBJECT specific fields (entity-level) ────────────── */
  if (fm.entity_class === "uap_object") {
    const u = fm;
    sections.push(
      <Section key="uapent" title="Object profile" icon={<Disc3 size={12} className="text-[#ff3344]" />}>
        <div className="flex flex-wrap gap-2">
          {u.shape && <FmChip color="red" label={`shape: ${u.shape}`} />}
          {u.color && <FmChip color="red" label={`color: ${u.color}`} />}
          {u.size_estimate_m && <FmChip color="red" label={`size: ${u.size_estimate_m.min ?? "?"}–${u.size_estimate_m.max ?? "?"} m`} />}
          {u.altitude_ft && <FmChip color="cyan" label={`alt: ${u.altitude_ft.min ?? "?"}–${u.altitude_ft.max ?? "?"} ft`} />}
          {u.speed_kts && <FmChip color="cyan" label={`speed: ${u.speed_kts.min ?? "?"}–${u.speed_kts.max ?? "?"} kts`} />}
          {isNonEmptyArray(u.maneuver_descriptors) && u.maneuver_descriptors!.map((m, i) => <FmChip key={i} color="violet" label={m} />)}
          {isNonEmptyArray(u.features) && u.features!.map((f, i) => <FmChip key={`f${i}`} color="amber" label={f} />)}
          {u.confidence_band_overall && <FmConfidence band={u.confidence_band_overall} />}
        </div>
        {u.observed_in_event && (
          <div className="mt-2 text-[10px] text-[#5a6678] font-mono">observed in: <FmWikiLink target={u.observed_in_event} size="xs" /></div>
        )}
      </Section>
    );
  }

  /* ── LOCATION specific ────────────────────────────────────── */
  if (fm.entity_class === "location") {
    sections.push(
      <Section key="loc" title="Location" icon={<MapPin size={12} className="text-[#3fde6a]" />}>
        <div className="flex flex-wrap gap-2 items-center">
          {fm.location_type && <FmChip color="green" label={fm.location_type} />}
          {fm.country && <FmChip color="soft" label={Array.isArray(fm.country) ? fm.country.join(", ") : fm.country} />}
          {fm.region && <FmChip color="soft" label={fm.region} />}
          {fm.coordinates && (
            <FmCoordinates lat={fm.coordinates.lat ?? undefined} lon={fm.coordinates.lon ?? undefined} raw={fm.coordinates.raw_text} />
          )}
          {fm.parent_location && <FmWikiLink target={fm.parent_location} size="xs" />}
        </div>
      </Section>
    );
  }

  /* ── EVENT specific ───────────────────────────────────────── */
  if (fm.entity_class === "event") {
    sections.push(
      <Section key="evt" title="Event" icon={<CalendarRange size={12} className="text-[#ffa500]" />}>
        <div className="flex flex-wrap gap-2 items-center">
          {fm.event_class && <FmChip color="amber" label={fm.event_class} />}
          {fm.date_start && <FmChip color="amber" label={`from: ${fm.date_start}`} />}
          {fm.date_end && fm.date_end !== fm.date_start && <FmChip color="amber" label={`to: ${fm.date_end}`} />}
          {fm.date_confidence && <FmConfidence band={fm.date_confidence} />}
          {fm.primary_location && <FmWikiLink target={fm.primary_location} size="xs" />}
          {isNonEmptyArray(fm.observers) && fm.observers!.map((o, i) => <FmWikiLink key={`o${i}`} target={o} size="xs" />)}
          {isNonEmptyArray(fm.uap_objects) && fm.uap_objects!.map((u, i) => <FmWikiLink key={`u${i}`} target={u} size="xs" />)}
        </div>
      </Section>
    );
  }

  /* ── PERSON specific ──────────────────────────────────────── */
  if (fm.entity_class === "person") {
    const dates = fm.dates ?? {};
    sections.push(
      <Section key="psn" title="Person" icon={<Users size={12} className="text-[#ff6ec7]" />}>
        <div className="flex flex-wrap gap-2 items-center">
          {fm.primary_role && <FmChip color="violet" label={fm.primary_role} />}
          {fm.primary_organization && <FmChip color="amber" label={fm.primary_organization} />}
          {isNonEmptyArray(fm.roles) && fm.roles!.map((r, i) => <FmChip key={i} color="violet" label={r} />)}
          {(dates.born || dates.died) && (
            <FmChip color="soft" label={`${dates.born ?? "?"} — ${dates.died ?? "?"}`} />
          )}
        </div>
      </Section>
    );
  }

  /* ── ORGANIZATION specific ────────────────────────────────── */
  if (fm.entity_class === "organization") {
    sections.push(
      <Section key="org" title="Organization" icon={<Building2 size={12} className="text-[#ff8a4d]" />}>
        <div className="flex flex-wrap gap-2 items-center">
          {fm.organization_type && <FmChip color="amber" label={fm.organization_type} />}
          {fm.country && <FmChip color="soft" label={Array.isArray(fm.country) ? fm.country.join(", ") : fm.country} />}
          {fm.founded && <FmChip color="soft" label={`founded: ${fm.founded}`} />}
        </div>
      </Section>
    );
  }

  /* ── CONCEPT/VEHICLE/OPERATION quick chips ────────────────── */
  if (fm.entity_class === "concept") {
    sections.push(
      <Section key="cncpt" title="Concept" icon={<BookOpen size={12} className="text-[#06d6a0]" />}>
        <div className="flex flex-wrap gap-2 items-center">
          {fm.concept_class && <FmChip color="green" label={fm.concept_class} />}
          {fm.domain && <FmChip color="soft" label={fm.domain} />}
        </div>
        {fm.definition_short && <p className="text-sm text-[#c8d4e6] mt-2">{fm.definition_short}</p>}
        {fm.definition_short_pt_br && <p className="text-xs text-[#8896aa] mt-1 italic">{fm.definition_short_pt_br}</p>}
      </Section>
    );
  }

  /* ── ENRICHMENT ───────────────────────────────────────────── */
  if (fm.enrichment_status || isNonEmptyArray(fm.external_sources)) {
    sections.push(
      <Section key="enr" title="Enrichment" icon={<Stamp size={12} />}>
        <div className="flex items-center gap-2 mb-1">
          <FmEnrichmentBadge status={fm.enrichment_status} />
          {fm.last_enriched && <FmTimestamp value={fm.last_enriched} label="last" />}
        </div>
        <FmExternalSources sources={fm.external_sources} />
      </Section>
    );
  }

  /* ── FLAGS ────────────────────────────────────────────────── */
  if (isNonEmptyArray(fm.flags)) {
    sections.push(
      <Section key="flags" title="Flags" icon={<AlertTriangle size={12} className="text-[#f5c542]" />}>
        <div className="flex flex-wrap gap-1">
          {fm.flags!.map((f, i) => <FmFlag key={i} flag={f} />)}
        </div>
      </Section>
    );
  }

  /* ── TIMESTAMPS (compact footer) ──────────────────────────── */
  const ts: React.ReactNode[] = [];
  if (fm.last_ingest)   ts.push(<FmTimestamp key="li" value={fm.last_ingest} label="ingest" />);
  if (fm.last_lint)     ts.push(<FmTimestamp key="ll" value={fm.last_lint} label="lint" />);
  if (fm.last_enriched && !fm.external_sources) ts.push(<FmTimestamp key="le" value={fm.last_enriched} label="enriched" />);

  return (
    <div className="space-y-5">
      {sections}
      {ts.length > 0 && (
        <div className="flex flex-wrap gap-3 pt-2 border-t border-[rgba(0,255,156,0.08)]">{ts}</div>
      )}
    </div>
  );
}