/* global React */
const { useState, useMemo, useEffect, useRef, useCallback, Fragment } = React;

// Cycle order: unset → lead → follow → out → unset
const PRIORITY_ORDER = ["unset", "lead", "follow", "out"];

const nextPriority = (p) => PRIORITY_ORDER[(PRIORITY_ORDER.indexOf(p) + 1) % PRIORITY_ORDER.length];
const prevPriority = (p) => PRIORITY_ORDER[(PRIORITY_ORDER.indexOf(p) + PRIORITY_ORDER.length - 1) % PRIORITY_ORDER.length];

const PRIORITY_LABEL = {
  unset:  "Unset",
  lead:   "Lead",
  follow: "Follow",
  out:    "Out of scope",
};

const PRIORITY_BLURB = {
  unset:  "not decided",
  lead:   "top 3–5 — the project lives or dies on these",
  follow: "tracked — should land in spec, won’t block",
  out:    "knowingly excluded from scope",
};

// Auto-detect trade-offs from current priorities
function detectTradeoffs(priorities) {
  return window.FRAMEWORK.tradeoffs.filter(t => {
    const pa = priorities[t.a];
    const pb = priorities[t.b];
    return (pa === "lead" || pa === "follow") && (pb === "lead" || pb === "follow");
  });
}

// Build a Session record from a template id
function sessionFromTemplate(templateId) {
  const priorities = {};
  for (const leaf of window.ALL_LEAVES) priorities[leaf.id] = "unset";
  if (!templateId) return { priorities, notes: {} };
  const t = window.FRAMEWORK.templates.find(x => x.id === templateId);
  if (!t) return { priorities, notes: {} };
  for (const id of t.lead) priorities[id] = "lead";
  for (const id of t.follow) priorities[id] = "follow";
  for (const id in priorities) if (priorities[id] === "unset") priorities[id] = "out";
  return { priorities, notes: {} };
}

function sessionFromSample() {
  const priorities = {};
  for (const leaf of window.ALL_LEAVES) priorities[leaf.id] = "out";
  for (const id of window.FRAMEWORK.sample.lead) priorities[id] = "lead";
  for (const id of window.FRAMEWORK.sample.follow) priorities[id] = "follow";
  return { priorities, notes: { ...window.FRAMEWORK.sample.notes } };
}

function emptySession() {
  const priorities = {};
  for (const leaf of window.ALL_LEAVES) priorities[leaf.id] = "unset";
  return { priorities, notes: {} };
}

// Counts helper
function priorityCounts(priorities) {
  const c = { lead: 0, follow: 0, out: 0, unset: 0 };
  for (const id in priorities) c[priorities[id]]++;
  return c;
}

// Crane brand wordmark
function Brand() {
  return (
    <a href="https://cranebioworks.com" className="brand" target="_blank" rel="noopener noreferrer">
      <img src="assets/logo-full.png" alt="Crane Bioworks" className="brand-logo" />
      <span className="brand-sep">/</span>
      <span className="brand-tool">Quality Attributes</span>
    </a>
  );
}

// Screen navigation (top tabs)
function ScreenNav({ screen, setScreen }) {
  const items = [
    { id: "landing",   step: "01", label: "Set up" },
    { id: "workspace", step: "02", label: "Pick priorities" },
    // Summary covers both pyramid and heatmap views — the poster screen
    // itself has the pyramid ↔ heatmap toggle.
    { id: "summary",   step: "03", label: "Summary", matches: ["pyramid", "heatmap"] },
    { id: "workshop",  step: "04", label: "Workshop" },
  ];
  return (
    <nav className="screen-nav">
      {items.map(it => {
        const active = it.matches ? it.matches.includes(screen) : screen === it.id;
        const target = it.matches ? (it.matches.includes(screen) ? screen : it.matches[0]) : it.id;
        return (
          <button
            key={it.id}
            className={active ? "active" : ""}
            onClick={() => setScreen(target)}
          >
            <span className="step">{it.step}</span>{it.label}
          </button>
        );
      })}
    </nav>
  );
}

// Status-priority tag
function PriorityTag({ p, size = "sm" }) {
  const styles = {
    lead:   { bg: "var(--c-violet)",  fg: "#fff", border: "transparent" },
    follow: { bg: "var(--c-emerald)", fg: "#fff", border: "transparent" },
    out:    { bg: "rgba(34,49,83,0.06)", fg: "rgba(34,49,83,0.55)", border: "rgba(34,49,83,0.1)" },
    unset:  { bg: "transparent", fg: "rgba(34,49,83,0.50)", border: "rgba(34,49,83,0.15)" },
  };
  const s = styles[p] || styles.unset;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: size === "sm" ? "3px 8px" : "5px 12px",
      borderRadius: 999,
      background: s.bg,
      color: s.fg,
      border: `1px solid ${s.border}`,
      fontFamily: "var(--font-jakarta)",
      fontSize: size === "sm" ? 10 : 11,
      fontWeight: 700,
      letterSpacing: "0.14em",
      textTransform: "uppercase",
    }}>
      <span style={{
        width: 5, height: 5, borderRadius: 999,
        background: p === "unset" ? "rgba(34,49,83,0.30)" : (s.fg === "#fff" ? "#fff" : "rgba(34,49,83,0.40)"),
        opacity: p === "unset" ? 1 : 0.8,
      }}></span>
      {PRIORITY_LABEL[p]}
    </span>
  );
}

// Tiny pill (used in workspace)
function GroupPill({ group }) {
  const isViolet = group.accent === "violet";
  return (
    <span style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 8,
      padding: "5px 12px",
      borderRadius: 999,
      background: isViolet ? "rgba(104,90,217,0.08)" : "rgba(16,185,129,0.08)",
      border: `1px solid ${isViolet ? "rgba(104,90,217,0.20)" : "rgba(16,185,129,0.20)"}`,
      color: isViolet ? "var(--c-violet-deep)" : "var(--c-emerald-700)",
      fontFamily: "var(--font-mono)",
      fontSize: 11,
      letterSpacing: "0.05em",
    }}>
      <span style={{
        fontFamily: "var(--font-mono)",
        fontWeight: 600,
        opacity: 0.7
      }}>{String(group.id).padStart(2, "0")}</span>
      {group.short}
    </span>
  );
}

Object.assign(window, {
  PRIORITY_ORDER, nextPriority, prevPriority, PRIORITY_LABEL, PRIORITY_BLURB,
  detectTradeoffs, sessionFromTemplate, sessionFromSample, emptySession,
  priorityCounts, Brand, ScreenNav, PriorityTag, GroupPill,
  useState, useMemo, useEffect, useRef, useCallback, Fragment,
});