// ui_kits/or/report-view.jsx — alignment report for a single entity

function BackToCanon({ onBack }) {
  return (
    <a
      href="#/"
      onClick={(e) => { e.preventDefault(); onBack(); }}
      style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        textDecoration: "none",
        color: "var(--fg-3)",
        fontFamily: "var(--font-body)", fontSize: 14,
        marginBottom: 32,
      }}
      onMouseEnter={(e) => (e.currentTarget.style.color = "var(--fg-1)")}
      onMouseLeave={(e) => (e.currentTarget.style.color = "var(--fg-3)")}
    >
      <OrIcon name="arrow-left" size={16} />
      <span>Back to canon</span>
    </a>
  );
}

function ReportHeader({ entity }) {
  return (
    <header style={{ paddingBottom: 36, borderBottom: "1px solid var(--hairline)", marginBottom: 48 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
        <OrIcon name="life" size={16} />
        <MetaEyebrowO>Alignment report · {entity.kind} · last reviewed {entity.alignment.lastReviewed}</MetaEyebrowO>
        <span style={{ flexGrow: 1 }} />
        <ScripturePin>{entity.biblicalAnchor}</ScripturePin>
      </div>
      <h1
        style={{
          fontFamily: "var(--font-display)",
          fontWeight: 300,
          fontVariationSettings: '"opsz" 144',
          fontSize: "clamp(36px, 5vw, 60px)",
          letterSpacing: "-0.02em",
          lineHeight: 1.02,
          color: "var(--fg-1)",
          margin: 0,
        }}
      >
        {entity.name}.
      </h1>
      <p style={{ marginTop: 20, fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.55, color: "var(--fg-2)", maxWidth: 760 }}>
        {entity.summary} {entity.story}
      </p>
    </header>
  );
}

function TovVerdict({ alignment }) {
  return (
    <section
      style={{
        padding: 36,
        border: "1px solid rgba(201, 169, 97, 0.35)",
        background: "rgba(201, 169, 97, 0.05)",
        marginBottom: 56,
        display: "grid",
        gridTemplateColumns: "auto 1fr auto",
        gap: 36,
        alignItems: "center",
      }}
    >
      <OrIcon name="alignment-score" size={48} color="var(--tehom-signal)" />
      <div>
        <MetaEyebrowO color="var(--tehom-signal)">Canonical alignment · the verdict</MetaEyebrowO>
        <div
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 300,
            fontVariationSettings: '"opsz" 144',
            fontSize: 72,
            color: "var(--tehom-signal)",
            lineHeight: 0.92,
            letterSpacing: "-0.03em",
            margin: "6px 0",
          }}
        >
          {alignment.verdict}
        </div>
        <p style={{ margin: 0, fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg-2)", lineHeight: 1.5 }}>
          {alignment.summary}
        </p>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-end", textAlign: "right" }}>
        <MonoTagO color="var(--fg-4)">surfaced by</MonoTagO>
        <MonoTagO color="var(--fg-2)">{alignment.reviewer}</MonoTagO>
        <ScripturePin>Gen 1:31</ScripturePin>
      </div>
    </section>
  );
}

function VirtueRow({ virtue, state, metaNodes }) {
  const node = metaNodes.find((n) => n.id === virtue.id);
  const stateLabel = state === "attended" ? "Attended" : state === "under-attended" ? "Under-attended" : "Void";
  const stateColor = state === "attended" ? "var(--fg-1)" : state === "under-attended" ? "var(--tehom-signal)" : "var(--tehom-muted)";
  return (
    <article
      style={{
        display: "grid",
        gridTemplateColumns: "auto 200px 1fr 140px",
        gap: 24,
        alignItems: "start",
        padding: "20px 16px",
        borderBottom: "1px solid var(--hairline)",
      }}
    >
      <AlignmentDot state={state} />
      <div>
        <span style={{ fontFamily: "var(--font-body)", fontSize: 16, fontWeight: 500, color: "var(--fg-1)", display: "block" }}>{node?.name || virtue.id}</span>
        <div style={{ marginTop: 4 }}><ScripturePin>{virtue.anchor}</ScripturePin></div>
      </div>
      <p style={{ margin: 0, fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.55, color: state === "under-attended" ? "var(--fg-2)" : "var(--fg-3)" }}>
        {virtue.evidence || virtue.gap}
      </p>
      <div style={{ textAlign: "right" }}>
        <MonoTagO color={stateColor}>{stateLabel}</MonoTagO>
      </div>
    </article>
  );
}

function VirtuesPanel({ entity, metaNodes }) {
  return (
    <section style={{ marginBottom: 56 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
        <OrIcon name="virtue" size={16} />
        <MetaEyebrowO>Virtues · {entity.virtuesAttended.length} attended · {entity.virtuesUnderAttended.length} under-attended</MetaEyebrowO>
      </div>
      <div style={{ borderTop: "1px solid var(--hairline)" }}>
        {entity.virtuesAttended.map((v, i) => (
          <VirtueRow key={`a-${i}`} virtue={v} state="attended" metaNodes={metaNodes} />
        ))}
        {entity.virtuesUnderAttended.map((v, i) => (
          <VirtueRow key={`u-${i}`} virtue={v} state="under-attended" metaNodes={metaNodes} />
        ))}
      </div>
    </section>
  );
}

function FiveFsPanel({ fiveFs }) {
  const entries = Object.entries(fiveFs);
  return (
    <section style={{ marginBottom: 56 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
        <OrIcon name="body" size={16} />
        <MetaEyebrowO>Five F's · the five stewardships</MetaEyebrowO>
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
          borderTop: "1px solid var(--hairline)",
          borderLeft: "1px solid var(--hairline)",
        }}
      >
        {entries.map(([key, value]) => (
          <div
            key={key}
            style={{
              padding: "16px 14px",
              borderRight: "1px solid var(--hairline)",
              borderBottom: "1px solid var(--hairline)",
              display: "flex",
              flexDirection: "column",
              gap: 8,
            }}
          >
            <MetaEyebrowO>{key}</MetaEyebrowO>
            <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg-2)", lineHeight: 1.5 }}>{value.detail}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function RitualsAndFrameworks({ entity }) {
  return (
    <section
      style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 32,
        marginBottom: 56,
      }}
    >
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
          <OrIcon name="ritual" size={16} />
          <MetaEyebrowO>Rituals practiced</MetaEyebrowO>
        </div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
          {entity.ritualsPracticed.map((r, i) => (
            <li key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", border: "1px solid var(--hairline)" }}>
              <AlignmentDot state="attended" />
              <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg-2)" }}>{r}</span>
            </li>
          ))}
        </ul>
      </div>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
          <OrIcon name="canon" size={16} />
          <MetaEyebrowO>Frameworks in use</MetaEyebrowO>
        </div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
          {entity.frameworksInUse.map((f, i) => (
            <li key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", border: "1px solid var(--hairline)" }}>
              <AlignmentDot state="attended" />
              <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg-2)" }}>{f}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function RolesAndDomains({ entity }) {
  return (
    <section
      style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr 1fr",
        gap: 32,
        paddingBottom: 56,
        borderBottom: "1px solid var(--hairline)",
        marginBottom: 56,
      }}
    >
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
          <OrIcon name="calling" size={16} />
          <MetaEyebrowO>Roles</MetaEyebrowO>
        </div>
        <div style={{ marginTop: 8, fontFamily: "var(--font-body)", fontSize: 15, color: "var(--fg-2)", lineHeight: 1.5 }}>
          {entity.roles.join(" · ")}
        </div>
      </div>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
          <OrIcon name="stewardship" size={16} />
          <MetaEyebrowO>Domains</MetaEyebrowO>
        </div>
        <div style={{ marginTop: 8, fontFamily: "var(--font-body)", fontSize: 15, color: "var(--fg-2)", lineHeight: 1.5 }}>
          {entity.domains.join(" · ")}
        </div>
      </div>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
          <OrIcon name="vision" size={16} />
          <MetaEyebrowO>Purpose anchored to</MetaEyebrowO>
        </div>
        <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 6 }}>
          {entity.purpose.anchors.map((a, i) => <ScripturePin key={i}>{a}</ScripturePin>)}
        </div>
      </div>
    </section>
  );
}

function AlignmentReport({ onBack }) {
  const { entity, metaNodes } = window.OR_DATA;
  return (
    <OContainer style={{ padding: "48px 0 96px" }}>
      <BackToCanon onBack={onBack} />
      <ReportHeader entity={entity} />
      <TovVerdict alignment={entity.alignment} />
      <VirtuesPanel entity={entity} metaNodes={metaNodes} />
      <RolesAndDomains entity={entity} />
      <FiveFsPanel fiveFs={entity.fiveFs} />
      <RitualsAndFrameworks entity={entity} />
    </OContainer>
  );
}

Object.assign(window, { BackToCanon, ReportHeader, TovVerdict, VirtueRow, VirtuesPanel, FiveFsPanel, RitualsAndFrameworks, RolesAndDomains, AlignmentReport });