// ui_kits/or/canon-view.jsx — the canon library

const { useState: useStateCanon, useMemo: useMemoCanon } = React;

function CanonHeader({ canon, onJumpToReport }) {
  return (
    <header style={{ padding: "48px 0 36px", borderBottom: "1px solid var(--hairline)" }}>
      <OContainer>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
          <MetaEyebrowO>The canon · v{canon.version} · {canon.scriptureRootCount} scriptural anchors</MetaEyebrowO>
          <MonoTagO>last reviewed {canon.lastReviewed}</MonoTagO>
        </div>
        <h1
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 300,
            fontVariationSettings: '"opsz" 144',
            fontSize: "clamp(42px, 5.5vw, 72px)",
            letterSpacing: "-0.02em",
            lineHeight: 1.02,
            color: "var(--fg-1)",
            margin: 0,
            maxWidth: 940,
          }}
        >
          What the canon names, surfaced.
        </h1>
        <p
          style={{
            margin: "24px 0 0",
            fontFamily: "var(--font-body)",
            fontSize: 18,
            lineHeight: 1.55,
            color: "var(--fg-2)",
            maxWidth: 720,
          }}
        >
          Or holds the scripture-rooted source of truth and the frameworks that read it. The canon is not Or's verdict; Or surfaces what the canon already names. Every framework here anchors to specific verses; every virtue traces to specific frameworks.
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 32, marginTop: 36 }}>
          <a
            href="#/report/david-shepherd"
            onClick={(e) => { e.preventDefault(); onJumpToReport(); }}
            style={{
              color: "var(--fg-1)",
              textDecoration: "none",
              borderBottom: "1px solid var(--tehom-utility)",
              paddingBottom: 5,
              fontFamily: "var(--font-body)",
              fontWeight: 500,
              fontSize: 15,
            }}
          >
            See a worked example: David Shepherd
          </a>
          <MonoTagO color="var(--fg-4)">{canon.frameworkCount} frameworks · {canon.ritualCount} rituals · {canon.metaNodeCount} virtues</MonoTagO>
        </div>
      </OContainer>
    </header>
  );
}

function VirtueLattice({ metaNodes }) {
  return (
    <section style={{ padding: "48px 0 40px", borderBottom: "1px solid var(--hairline)" }}>
      <OContainer>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 22 }}>
          <OrIcon name="virtue" size={16} />
          <MetaEyebrowO>Virtues · the canon's meta-nodes</MetaEyebrowO>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
            gap: 0,
            borderTop: "1px solid var(--hairline)",
            borderLeft: "1px solid var(--hairline)",
          }}
        >
          {metaNodes.map((node) => (
            <div
              key={node.id}
              style={{
                padding: "18px 16px",
                borderRight: "1px solid var(--hairline)",
                borderBottom: "1px solid var(--hairline)",
                display: "flex",
                flexDirection: "column",
                gap: 6,
              }}
            >
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10 }}>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 500, color: "var(--fg-1)" }}>{node.name}</span>
                <MonoTagO>{node.frameworkCount}</MonoTagO>
              </div>
              <ScripturePin>{node.scripture}</ScripturePin>
            </div>
          ))}
        </div>
      </OContainer>
    </section>
  );
}

function FrameworkCard({ fw, metaNodes, onSelect }) {
  const virtueNames = fw.virtues.map((vid) => metaNodes.find((n) => n.id === vid)?.name || vid);
  return (
    <article
      onClick={() => onSelect(fw.id)}
      style={{
        padding: "24px 22px",
        borderRight: "1px solid var(--hairline)",
        borderBottom: "1px solid var(--hairline)",
        display: "flex",
        flexDirection: "column",
        gap: 14,
        cursor: "pointer",
        transition: "background var(--dur-quick) var(--ease-quiet)",
        minHeight: 220,
      }}
      onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(250,247,242,0.025)")}
      onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
    >
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10 }}>
        <h3
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 300,
            fontVariationSettings: '"opsz" 144',
            fontSize: 22,
            letterSpacing: "-0.015em",
            lineHeight: 1.1,
            color: "var(--fg-1)",
            margin: 0,
          }}
        >
          {fw.name}
        </h3>
        <MonoTagO color="var(--fg-4)">{fw.domain.join(" · ")}</MonoTagO>
      </div>
      <p
        style={{
          margin: 0,
          fontFamily: "var(--font-body)",
          fontSize: 13,
          lineHeight: 1.55,
          color: "var(--fg-3)",
          flexGrow: 1,
        }}
      >
        {fw.summary}
      </p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
        {fw.virtues.slice(0, 4).map((vid, i) => (
          <VirtueBadge key={i} id={vid} name={virtueNames[i]} />
        ))}
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, paddingTop: 8, borderTop: "1px solid var(--hairline)" }}>
        {fw.scripture.slice(0, 3).map((s, i) => (
          <ScripturePin key={i}>{s}</ScripturePin>
        ))}
        {fw.scripture.length > 3 && <MonoTagO color="var(--fg-4)">+{fw.scripture.length - 3}</MonoTagO>}
      </div>
    </article>
  );
}

function FrameworkGrid({ frameworks, metaNodes, onSelect }) {
  return (
    <section style={{ padding: "48px 0 96px" }}>
      <OContainer>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 24 }}>
          <OrIcon name="canon" size={16} />
          <MetaEyebrowO>Frameworks · {frameworks.length} tools the canon shaped</MetaEyebrowO>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
            borderTop: "1px solid var(--hairline)",
            borderLeft: "1px solid var(--hairline)",
          }}
        >
          {frameworks.map((fw) => (
            <FrameworkCard key={fw.id} fw={fw} metaNodes={metaNodes} onSelect={onSelect} />
          ))}
        </div>
      </OContainer>
    </section>
  );
}

function RitualsStrip({ rituals }) {
  return (
    <section style={{ padding: "40px 0", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)" }}>
      <OContainer>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 20 }}>
          <OrIcon name="ritual" size={16} />
          <MetaEyebrowO>Rituals · the rhythms that anchor practice</MetaEyebrowO>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 0, borderTop: "1px solid var(--hairline)", borderLeft: "1px solid var(--hairline)" }}>
          {rituals.map((r, i) => (
            <div
              key={i}
              style={{
                padding: "16px 14px",
                borderRight: "1px solid var(--hairline)",
                borderBottom: "1px solid var(--hairline)",
                display: "flex",
                flexDirection: "column",
                gap: 6,
                minHeight: 100,
              }}
            >
              <span style={{ fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 500, color: "var(--fg-1)" }}>{r.name}</span>
              <ScripturePin>{r.anchor}</ScripturePin>
              <MonoTagO color="var(--fg-4)">{r.cadence}</MonoTagO>
            </div>
          ))}
        </div>
      </OContainer>
    </section>
  );
}

function CanonView({ onJumpToReport }) {
  const { canon, metaNodes, frameworks, rituals } = window.OR_DATA;
  const [selectedFw, setSelectedFw] = useStateCanon(null);
  const detail = useMemoCanon(() => frameworks.find((f) => f.id === selectedFw), [selectedFw]);

  return (
    <div>
      <CanonHeader canon={canon} onJumpToReport={onJumpToReport} />
      <BiblicalGraph />
      <VirtueLattice metaNodes={metaNodes} />
      <FrameworkGrid frameworks={frameworks} metaNodes={metaNodes} onSelect={setSelectedFw} />
      <RitualsStrip rituals={rituals} />
      {detail && <FrameworkDetail fw={detail} metaNodes={metaNodes} onClose={() => setSelectedFw(null)} />}
    </div>
  );
}

function FrameworkDetail({ fw, metaNodes, onClose }) {
  const virtueNames = fw.virtues.map((vid) => metaNodes.find((n) => n.id === vid)?.name || vid);
  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0,
        background: "rgba(5, 10, 16, 0.85)",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: 24, zIndex: 100,
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: "var(--tehom-deep)",
          border: "1px solid var(--hairline-strong)",
          maxWidth: 640, width: "100%",
          padding: 40,
          maxHeight: "90vh", overflow: "auto",
        }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
          <MetaEyebrowO>Framework · {fw.domain.join(" · ")}</MetaEyebrowO>
          <button onClick={onClose} style={{ background: "transparent", border: "none", color: "var(--fg-3)", cursor: "pointer", padding: 4 }}>
            <OrIcon name="close" size={16} />
          </button>
        </div>
        <h2
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 300,
            fontVariationSettings: '"opsz" 144',
            fontSize: 38,
            letterSpacing: "-0.02em",
            lineHeight: 1.05,
            color: "var(--fg-1)",
            margin: 0,
          }}
        >
          {fw.name}.
        </h2>
        <p style={{ marginTop: 18, fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.6, color: "var(--fg-2)" }}>
          {fw.summary}
        </p>
        {fw.embodied && (
          <div style={{ marginTop: 18, padding: "14px 16px", borderLeft: "2px solid var(--tehom-signal)", background: "rgba(201,169,97,0.06)" }}>
            <MetaEyebrowO color="var(--tehom-signal)">Embodied</MetaEyebrowO>
            <p style={{ marginTop: 6, fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: 14, lineHeight: 1.55, color: "var(--fg-2)" }}>
              {fw.embodied}
            </p>
          </div>
        )}
        <div style={{ marginTop: 28 }}>
          <MetaEyebrowO>Virtues anchored</MetaEyebrowO>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
            {fw.virtues.map((vid, i) => <VirtueBadge key={i} id={vid} name={virtueNames[i]} />)}
          </div>
        </div>
        <div style={{ marginTop: 24 }}>
          <MetaEyebrowO>Scripture roots</MetaEyebrowO>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 10 }}>
            {fw.scripture.map((s, i) => <ScripturePin key={i}>{s}</ScripturePin>)}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CanonHeader, VirtueLattice, FrameworkCard, FrameworkGrid, RitualsStrip, CanonView, FrameworkDetail });