/* boards.jsx — board wrappers rendered inside DCArtboards.
   Board: a blueprint frame around a FlowDiagram, with a "not used here"
   overlay when the highlight filter excludes it.
   StackBoard: the recommended-stack + legend reference card.
   Exports: Board, StackBoard */

const FRAME = {
  bg: '#fbfcfe',
  edge: 'rgba(28,39,51,0.10)',
};

function blueprintBg(show) {
  if (!show) return FRAME.bg;
  const g = encodeURIComponent('rgba(28,39,51,0.045)');
  return `${FRAME.bg} url("data:image/svg+xml,%3Csvg width='28' height='28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0H0v28' fill='none' stroke='${g}' stroke-width='1'/%3E%3C/svg%3E")`;
}

function Board({ id, view }) {
  const spec = window.BOARDS[id];
  const { mode, sel, density, running, t, grid } = view;
  const used = window.boardUses(spec, sel);
  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative',
      background: blueprintBg(grid !== false),
      borderTop: `3px solid ${used || !sel ? PAL.ink : 'rgba(28,39,51,0.15)'}`,
      boxSizing: 'border-box', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', inset: 0, padding: '10px 14px 14px' }}>
        <window.FlowDiagram spec={spec} mode={mode} sel={sel} density={density} running={running} t={t} />
      </div>
      {sel && !used && (
        <div style={{
          position: 'absolute', inset: 0, background: 'rgba(251,252,254,0.74)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          backdropFilter: 'blur(1px)',
        }}>
          <div style={{
            font: '600 13px "JetBrains Mono", monospace', color: PAL.faint, letterSpacing: '.08em',
            border: `1px dashed ${PAL.faint}`, padding: '8px 16px', borderRadius: 4, background: '#fff',
          }}>
            — not used in this view —
          </div>
        </div>
      )}
    </div>
  );
}

// ── recommended stack + legend ─────────────────────────────────────────
function Swatch({ fill, stroke, dash }) {
  return (
    <span style={{
      display: 'inline-block', width: 22, height: 14, borderRadius: 3,
      background: fill, border: `1.5px ${dash ? 'dashed' : 'solid'} ${stroke}`, flex: '0 0 auto',
    }} />
  );
}

function StackBoard({ view }) {
  const { sel } = view;
  const groups = ['Shared primitives', 'Off-the-shelf', 'Adapt a model', 'Build it (deterministic)'];
  const mono = '"JetBrains Mono", monospace';
  const disp = '"Space Grotesk", sans-serif';

  const buildChip = (b) => {
    const m = window.BUILD[b];
    return (
      <span style={{
        font: `600 8.5px ${mono}`, letterSpacing: '.06em', color: m.text,
        background: m.fill, border: `1px solid ${m.stroke}`, borderRadius: 3, padding: '2px 6px',
        textTransform: 'uppercase', whiteSpace: 'nowrap',
      }}>{m.label}</span>
    );
  };

  return (
    <div style={{
      width: '100%', height: '100%', background: FRAME.bg, boxSizing: 'border-box',
      borderTop: `3px solid ${PAL.ink}`, padding: '22px 26px', overflow: 'hidden',
      display: 'grid', gridTemplateColumns: '1.55fr 1fr', gap: 28,
      fontFamily: disp, color: PAL.ink,
    }}>
      {/* left — the registry */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, minHeight: 0 }}>
        <div>
          <div style={{ font: `700 17px ${disp}`, letterSpacing: '-0.2px' }}>Recommended stack — reuse map</div>
          <div style={{ font: `400 11px ${mono}`, color: PAL.dim, marginTop: 3, letterSpacing: '.02em' }}>
            what's shared, where it's reused, and whether you buy / adapt / build it
          </div>
        </div>
        {groups.map((g) => (
          <div key={g}>
            <div style={{ font: `700 10px ${mono}`, color: PAL.dim, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 7 }}>{g}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {window.REGISTRY.filter((r) => r.group === g).map((r) => {
                const m = window.BUILD[r.build];
                const hot = sel === r.key;
                return (
                  <div key={r.key} style={{
                    display: 'grid', gridTemplateColumns: '156px 1fr 92px', gap: 10, alignItems: 'center',
                    padding: '4px 8px', borderRadius: 5,
                    background: hot ? 'rgba(47,109,246,0.08)' : 'transparent',
                    boxShadow: hot ? `inset 0 0 0 1px ${PAL.accent}` : 'none',
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
                      <Swatch fill={m.fill} stroke={m.stroke} dash={r.build === 'make'} />
                      <span style={{ font: `600 12px ${disp}`, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.label}</span>
                    </div>
                    <span style={{ font: `400 11px ${mono}`, color: PAL.dim, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.role}</span>
                    <span style={{ justifySelf: 'end' }}>{buildChip(r.build)}</span>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      {/* right — legends */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, borderLeft: `1px solid ${FRAME.edge}`, paddingLeft: 24 }}>
        <div>
          <div style={{ font: `700 11px ${mono}`, color: PAL.dim, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 9 }}>Build status — node fill</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {['shelf', 'adapt', 'make', 'infra'].map((b) => {
              const m = window.BUILD[b];
              return (
                <div key={b} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Swatch fill={m.fill} stroke={m.stroke} dash={b === 'make'} />
                  <span style={{ font: `600 12px ${disp}` }}>{m.label}</span>
                  <span style={{ font: `400 10.5px ${mono}`, color: PAL.dim }}>· {m.hint}</span>
                </div>
              );
            })}
          </div>
        </div>

        <div>
          <div style={{ font: `700 11px ${mono}`, color: PAL.dim, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 9 }}>Edges</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
            {[['seq', 'sequence', '#aab4c0', false], ['fan', 'Send fan-out', '#0f9d8c', false],
              ['cond', 'conditional branch', '#d98a1f', true], ['human', 'human gate', '#2f6df6', true],
              ['feed', 'cross-flow feed', '#6b5bd6', true], ['emit', 'emit → event log', '#7d8b9a', true]].map(([k, lab, c, d]) => (
              <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <svg width="34" height="8"><line x1="1" y1="4" x2="33" y2="4" stroke={c} strokeWidth="2" strokeDasharray={d ? '4 3' : null} /></svg>
                <span style={{ font: `500 11.5px ${disp}` }}>{lab}</span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div style={{ font: `700 11px ${mono}`, color: PAL.dim, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 9 }}>Runtime status — press ▶ RUN</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {Object.keys(window.STATUS).map((s) => {
              const m = window.STATUS[s];
              return (
                <span key={s} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 11, height: 11, borderRadius: 3, background: m.fill, border: `1.5px solid ${m.stroke}` }} />
                  <span style={{ font: `500 11px ${disp}` }}>{m.label}</span>
                </span>
              );
            })}
          </div>
        </div>

        <div style={{ marginTop: 'auto', font: `400 10.5px ${mono}`, color: PAL.faint, lineHeight: 1.6 }}>
          Language: Python · HITL state persisted by the checkpointer · Langfuse traces on every node, all flows.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Board, StackBoard });