// RetroIntro.jsx — opening screen of the sprint retro.

function RetroIntro({ items, totalVotes, sgGoal, onStart, onBack }) {
  const counts = window.RETRO_COLUMNS.map((c) => ({
    col: c,
    count: (items[c.id] || []).length,
  }));

  return (
    <div style={{
      display: "flex",
      flexDirection: "column",
      height: "100%",
      padding: "0 20px 24px",
      gap: 14,
      boxSizing: "border-box",
    }}>
      <button
        onClick={onBack}
        style={{
          alignSelf: "flex-start",
          background: "none",
          border: "none",
          padding: 0,
          color: "var(--color-text-link)",
          fontFamily: "var(--font-family-sans)",
          fontSize: 14,
          fontWeight: 500,
          cursor: "pointer",
          display: "inline-flex",
          alignItems: "center",
          gap: 4,
          marginTop: 6,
        }}
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="15 18 9 12 15 6" />
        </svg>
        Back
      </button>

      <div className="ds-overline" style={{ color: "var(--color-brand-primary)" }}>
        Process review
      </div>
      <h1 style={{
        margin: 0,
        fontFamily: "var(--font-family-sans)",
        fontWeight: 600,
        fontSize: 24,
        lineHeight: "30px",
        letterSpacing: "-0.01em",
        color: "var(--color-text-primary)",
        textWrap: "balance",
      }}>
        The agents reviewed the whole process.<br />
        File the key insight.
      </h1>

      {/* Avatars row */}
      <div style={{
        display: "flex",
        gap: 8,
        alignItems: "center",
        padding: "8px 0 4px",
      }}>
        <div style={{ display: "flex", marginRight: 4 }}>
          {window.RETRO_TEAM.map((m, i) => (
            <div key={m.id} style={{
              width: 30, height: 30,
              borderRadius: "50%",
              background: m.color,
              color: m.fg,
              border: "2px solid var(--color-surface-default)",
              marginLeft: i === 0 ? 0 : -8,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontFamily: "var(--font-family-sans)",
              fontWeight: 700,
              fontSize: 10,
              letterSpacing: "0.04em",
              boxShadow: "var(--shadow-1)",
            }}>{m.initials}</div>
          ))}
        </div>
        <div style={{ fontSize: 12, lineHeight: "16px", color: "var(--color-text-secondary)" }}>
          5 sub-agents · one per process stage
        </div>
      </div>

      {/* Column counts preview */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr 1fr",
        gap: 6,
      }}>
        {counts.map(({ col, count }) => (
          <div key={col.id} style={{
            background: col.bg,
            border: `1px solid ${col.border}`,
            borderRadius: "var(--radius-md)",
            padding: "10px 10px 12px",
            display: "flex",
            flexDirection: "column",
            gap: 4,
          }}>
            <div style={{
              fontSize: 10,
              fontWeight: 700,
              letterSpacing: "0.08em",
              textTransform: "uppercase",
              color: col.fg,
            }}>{col.label}</div>
            <div style={{
              fontFamily: "var(--font-family-sans)",
              fontWeight: 700,
              fontSize: 22,
              lineHeight: 1,
              color: "var(--color-text-primary)",
              fontVariantNumeric: "tabular-nums",
              letterSpacing: "-0.01em",
            }}>{count}</div>
            <div style={{
              fontSize: 10,
              lineHeight: "13px",
              color: "var(--color-text-secondary)",
            }}>stickies</div>
          </div>
        ))}
      </div>

      {/* Rules */}
      <div style={{
        background: "var(--color-surface-subtle)",
        borderRadius: "var(--radius-md)",
        padding: "12px 14px",
        display: "flex",
        flexDirection: "column",
        gap: 6,
      }}>
        <div className="ds-overline" style={{ fontSize: 10, color: "var(--color-text-muted)" }}>
          How it works
        </div>
        {[
          ["01", `Continue / Start / Stop`, "Agents sorted what worked, what's missing, and what to drop."],
          ["02", "File the key insight", "Tap the one observation that matters most this session."],
          ["03", "Knowledge store", `What you file informs future trading goals.`],
        ].map(([n, t, d]) => (
          <div key={n} style={{
            display: "flex",
            gap: 8,
            alignItems: "flex-start",
            fontFamily: "var(--font-family-sans)",
          }}>
            <span style={{
              fontWeight: 700,
              fontSize: 12,
              color: "var(--color-brand-primary)",
              fontVariantNumeric: "tabular-nums",
              minWidth: 18,
              paddingTop: 1,
            }}>{n}</span>
            <div>
              <div style={{ fontWeight: 600, fontSize: 12, color: "var(--color-text-primary)" }}>{t}</div>
              <div style={{ fontSize: 11, lineHeight: "15px", color: "var(--color-text-secondary)" }}>{d}</div>
            </div>
          </div>
        ))}
      </div>

      <button
        onClick={onStart}
        style={{
          marginTop: "auto",
          height: 52,
          background: "var(--color-brand-primary)",
          color: "var(--color-text-on-brand)",
          border: "none",
          borderRadius: "var(--radius-sm)",
          fontFamily: "var(--font-family-sans)",
          fontWeight: 600,
          fontSize: 16,
          cursor: "pointer",
        }}
      >
        Review the process →
      </button>
    </div>
  );
}

Object.assign(window, { RetroIntro });