// app.jsx — shell: top bar + tab nav + mount

const TABS = [
  { id: "intro",        label: "Start Here",            Comp: ({ onSelect }) => <IntroTab onSelect={onSelect} /> },
  { id: "pipeline",     label: "Maturity Pipeline",     Comp: () => <PipelineTab /> },
  { id: "coverage",     label: "Pattern Coverage",      Comp: () => <CoverageTab /> },
  { id: "gaps",         label: "Team Gaps",             Comp: () => <GapsTab /> },
  { id: "fingerprints", label: "Reviewer Fingerprints", Comp: () => <FingerprintsTab /> },
  { id: "profiles",     label: "Author Profiles",       Comp: () => <ProfilesTab />, private: true },
];

function PrivateBadge() {
  return (
    <span style={{
      fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500,
      textTransform: "uppercase", letterSpacing: "0.07em",
      color: "var(--accent)", background: "rgba(43,80,232,0.10)",
      border: "1px solid rgba(43,80,232,0.20)", borderRadius: "var(--radius)",
      padding: "1px 5px", lineHeight: 1.3, marginLeft: 7,
    }}>private</span>
  );
}

function AboutModal({ onClose }) {
  useEffect(() => {
    const handler = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [onClose]);

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 200,
        background: "rgba(13,15,26,0.35)",
        display: "flex", alignItems: "flex-start", justifyContent: "flex-end",
        padding: "60px 32px 0",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          position: "relative",
          background: "var(--bg)", border: "1px solid var(--border)",
          borderRadius: 6, padding: "28px 32px 24px",
          width: 340,
        }}
      >
        {/* wordmark + version */}
        <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 12 }}>
          <div style={{
            fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 20,
            letterSpacing: "0.005em",
          }}>tricorder</div>
          {DATA.version && (
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: "var(--text-dim)", letterSpacing: "0.04em",
            }}>v{DATA.version}</span>
          )}
        </div>

        {/* one-liner */}
        <p style={{
          margin: "0 0 20px", fontSize: 14, lineHeight: 1.6,
          color: "var(--text)", fontFamily: "var(--font-sans)",
        }}>
          Reads a team's merged PR history and returns a structured map of what the team knows, what it misses, and what's ready to institutionalize.
        </p>

        {/* divider */}
        <div style={{ borderTop: "1px solid var(--border)", margin: "0 0 18px" }} />

        {/* contact */}
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {[
            { label: "email",     value: "tricorder@dhk.io",  href: "mailto:tricorder@dhk.io" },
            { label: "portfolio", value: "www.dhk.io",        href: "https://www.dhk.io"      },
          ].map(({ label, value, href }) => (
            <div key={label} style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-dim)",
                textTransform: "uppercase", letterSpacing: "0.07em", minWidth: 62,
              }}>{label}</span>
              <a href={href} target={href.startsWith("http") ? "_blank" : undefined}
                rel="noopener"
                style={{
                  fontFamily: "var(--font-mono)", fontSize: 12.5,
                  color: "var(--accent)", textDecoration: "none",
                  borderBottom: "1px solid transparent", transition: "color 0.15s, background 0.15s, border-color 0.15s",
                }}
                onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = "var(--accent)"}
                onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = "transparent"}
              >{value}</a>
            </div>
          ))}
        </div>

        {/* close */}
        <button onClick={onClose} style={{
          all: "unset", cursor: "pointer", position: "absolute",
          top: 14, right: 16,
          fontFamily: "var(--font-mono)", fontSize: 18,
          color: "var(--text-dim)", lineHeight: 1,
        }}>×</button>
      </div>
    </div>
  );
}

// Which rendered repository to show. One entry: plain label. Several: a select
// that reloads the page with ?repo=<slug>; the loader in index.html only honours
// slugs present in the index, so the value can never name an arbitrary file.
function RepoPicker() {
  const idx = window.TRICORDER_INDEX || { entries: [] };
  const entries = idx.entries || [];
  const currentSlug = (DATA.repo || "").replace("/", "__");
  if (entries.length < 2) {
    return <Mono dim style={{ fontSize: 13, whiteSpace: "nowrap" }}>{DATA.repo}</Mono>;
  }
  const go = (e) => {
    const slug = e.target.value;
    const url = new URL(window.location.href);
    url.searchParams.set("repo", slug);
    url.hash = "intro";
    window.location.assign(url.toString());
  };
  return (
    <label style={{ display: "inline-flex", alignItems: "baseline", gap: 6, whiteSpace: "nowrap" }}>
      <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }}>Repository</span>
      <select value={currentSlug} onChange={go} aria-label="Repository" style={{
        fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--text-muted)",
        background: "transparent", border: "1px solid var(--border)", borderRadius: "var(--radius)",
        padding: "2px 6px", cursor: "pointer",
      }}>
        {entries.map(e => (
          <option key={e.slug} value={e.slug}>
            {e.repo}{e.anonymized ? "" : " (private)"}
          </option>
        ))}
      </select>
    </label>
  );
}

function TopBar({ onAbout }) {
  return (
    <header style={{
      display: "flex", alignItems: "baseline", gap: 18,
      padding: "16px 32px 14px", borderBottom: "1px solid var(--border)",
      background: "var(--bg)", flexWrap: "wrap",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span aria-hidden="true" style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--accent)", display: "inline-block" }} />
          <div style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 22, letterSpacing: "-0.02em", lineHeight: 1 }}>
            tricorder
          </div>
        </div>
        <WipMark />
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 14, flexWrap: "wrap", marginLeft: "auto" }}>
        <RepoPicker />
        <span style={{ color: "var(--border)" }}>·</span>
        <Mono dim style={{ fontSize: 13, whiteSpace: "nowrap" }}>{DATA.window}</Mono>
        <span style={{ color: "var(--border)" }}>·</span>
        <Mono dim style={{ fontSize: 13, whiteSpace: "nowrap" }}>{DATA.pr_count} PRs</Mono>
        <span style={{ color: "var(--border)" }}>·</span>
        <a href={REPO_URL} target="_blank" rel="noopener" style={{
          fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--accent)",
          textDecoration: "none", whiteSpace: "nowrap", borderBottom: "1px solid transparent",
        }}
          onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = "var(--accent)"}
          onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = "transparent"}
        >GitHub ↗</a>
        <span style={{ color: "var(--border)" }}>·</span>
        <button onClick={onAbout} style={{
          all: "unset", cursor: "pointer",
          fontFamily: "var(--font-mono)", fontSize: 12.5,
          color: "var(--text-dim)", whiteSpace: "nowrap",
          borderBottom: "1px solid transparent", transition: "color 0.15s, background 0.15s, border-color 0.15s",
        }}
          onMouseEnter={(e) => { e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.borderBottomColor = "var(--border)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dim)"; e.currentTarget.style.borderBottomColor = "transparent"; }}
        >about</button>
      </div>
    </header>
  );
}

function TabBar({ active, onSelect }) {
  return (
    <nav style={{
      display: "flex", gap: 4, padding: "0 24px", borderBottom: "1px solid var(--border)",
      background: "var(--bg)", overflowX: "auto", position: "sticky", top: 0, zIndex: 20,
    }}>
      {TABS.map(t => {
        const on = t.id === active;
        return (
          <button key={t.id} data-tab={t.id} onClick={() => onSelect(t.id)}
            style={{
              all: "unset", cursor: "pointer", whiteSpace: "nowrap",
              display: "inline-flex", alignItems: "center",
              fontFamily: "var(--font-mono)", fontSize: 11, textTransform: "uppercase",
              letterSpacing: "0.1em",
              color: on ? "var(--accent)" : "var(--text-dim)",
              padding: "14px 14px 12px",
              borderBottom: `2px solid ${on ? "var(--accent)" : "transparent"}`,
              transition: "color 0.15s, background 0.15s, border-color 0.15s",
            }}
            onMouseEnter={(e) => { if (!on) e.currentTarget.style.color = "var(--text)"; }}
            onMouseLeave={(e) => { if (!on) e.currentTarget.style.color = "var(--text-dim)"; }}
          >{t.label}{t.private && <PrivateBadge />}</button>
        );
      })}
    </nav>
  );
}

function App() {
  const initial = (window.location.hash || "").replace("#", "");
  const [active, setActive] = useState(TABS.some(t => t.id === initial) ? initial : "intro");
  const [showAbout, setShowAbout] = useState(false);

  useEffect(() => { window.location.hash = active; }, [active]);

  const tab = TABS.find(t => t.id === active) || TABS[0];
  const needsFullHeight = active === "pipeline";

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100vh", minHeight: 0 }}>
      <TopBar onAbout={() => setShowAbout(true)} />
      <TabBar active={active} onSelect={setActive} />
      <main style={{ flex: 1, minHeight: 0, overflowY: needsFullHeight ? "hidden" : "auto", display: "flex", flexDirection: "column" }}>
        <tab.Comp onSelect={setActive} />
      </main>
      <Onboarding active={active} setActive={setActive} />
      {showAbout && <AboutModal onClose={() => setShowAbout(false)} />}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);