// Scene 5: MCP — Integration (33–40s, 7s)
// Rebuilt with springs, cadenced typing, token char-by-char reveal,
// tool call stagger with check-draw, parallax split reveal.

function SceneMCP() {
  const { localTime } = useSprite();
  const t = localTime;

  const cursorPath = [
    { t: 0.0, x: 960, y: 540 },
    { t: 1.1, x: 420, y: 360, click: true },
    { t: 3.0, x: 420, y: 360 },
    { t: 5.3, x: 1500, y: 620 },
    { t: 7.0, x: 1500, y: 620 },
  ];
  const cursor = cursorPhysics(cursorPath, t);

  const tokenGenerated = t > 1.15;
  const claudeVisible = t > 3.3;
  const splitP = clampN(spring(t, 0, 1, 3.3, { stiffness: 160, damping: 22 }), 0, 1);

  const camStops = [
    { t: 0.0, scale: 1.04, x: 900, y: 540 },
    { t: 1.5, scale: 1.04, x: 900, y: 540 },
    { t: 3.2, scale: 1.0,  x: 960, y: 540 },
    { t: 5.2, scale: 1.04, x: 1060, y: 580 },
    { t: 7.0, scale: 1.04, x: 1060, y: 580 },
  ];

  return (
    <Camera stops={camStops}>
      <AewitaShell activeMode="admin">
        <div style={{ position: 'absolute', inset: 0, display: 'flex' }}>
          {/* Sub-sidebar */}
          <div style={{
            width: 240, flexShrink: 0,
            borderRight: `1px solid ${COLORS.border}`,
            padding: '18px 12px',
            display: 'flex', flexDirection: 'column', gap: 3,
          }}>
            <div style={{ padding: '6px 12px 14px', fontSize: 18, fontFamily: FONTS.serif, fontWeight: 600, color: COLORS.textPrimary, display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ color: COLORS.copper }}>{Icons.shield}</span>
              Admin
            </div>
            {[
              { label: 'Users', icon: Icons.users },
              { label: 'Audit Log', icon: Icons.log },
              { label: 'Tenant Overview', icon: Icons.chart },
              { label: 'Integrations', icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="5" cy="9" r="2.5" stroke="currentColor" strokeWidth="1.3"/><circle cx="13" cy="5" r="2" stroke="currentColor" strokeWidth="1.3"/><circle cx="13" cy="13" r="2" stroke="currentColor" strokeWidth="1.3"/><path d="M7 8l4-3M7 10l4 3" stroke="currentColor" strokeWidth="1.3"/></svg>, active: true },
            ].map((item) => (
              <div key={item.label} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '9px 12px', borderRadius: 8,
                background: item.active ? 'rgba(217,72,78,0.10)' : 'transparent',
                color: item.active ? COLORS.accent : COLORS.textSecondary,
                fontSize: 13, fontWeight: item.active ? 600 : 400,
              }}>
                <div>{item.icon}</div>
                <span>{item.label}</span>
              </div>
            ))}
          </div>

          <div style={{ flex: 1, overflow: 'hidden', padding: '24px 32px', display: 'flex', gap: 20 }}>
            {/* Left: Aewita Integrations — width springs down as Claude appears */}
            <div style={{
              flex: `0 0 ${100 - splitP * 54}%`,
              display: 'flex', flexDirection: 'column', gap: 16,
              minWidth: 0,
            }}>
              <div>
                <div style={{
                  fontFamily: FONTS.serif, fontSize: 26, fontWeight: 600, color: COLORS.textPrimary,
                  opacity: spring(t, 0, 1, 0, Springs.snappy),
                }}>Integrations</div>
                <div style={{
                  fontSize: 13, color: COLORS.textSecondary, marginTop: 4,
                  opacity: spring(t, 0, 1, 0.05, Springs.snappy),
                }}>
                  Connect Aewita to MCP-compatible clients. Tokens are scoped and revocable.
                </div>
              </div>

              <TokenCard t={t} tokenGenerated={tokenGenerated} />

              <div style={{
                padding: 18,
                background: COLORS.bgCard,
                border: `1px solid ${COLORS.border}`,
                borderRadius: 12,
                fontSize: 12,
                opacity: spring(t, 0, 1, 0.3, Springs.gentle),
                transform: `translateY(${(1 - spring(t, 0, 1, 0.3, Springs.gentle)) * 10}px)`,
              }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: COLORS.textPrimary, marginBottom: 10 }}>Setup</div>
                <div style={{ color: COLORS.textSecondary, lineHeight: 1.7, fontFamily: FONTS.mono, fontSize: 11 }}>
                  <div>server: <span style={{ color: COLORS.copper }}>https://mcp.your-firm.aewita.local/mcp</span></div>
                  <div>auth: <span style={{ color: COLORS.copper }}>Bearer &lt;token&gt;</span></div>
                  <div>tools: library.search, library.query, assistant.run, scrivener.draft</div>
                </div>
              </div>
            </div>

            {/* Right: Claude Desktop — springs in from right */}
            {claudeVisible && (
              <div style={{
                flex: 1, minWidth: 0,
                opacity: Math.min(1, splitP),
                transform: `translateX(${(1 - Math.min(1, splitP)) * 60}px)`,
              }}>
                <ClaudeDesktopWindow t={t - 3.3} />
              </div>
            )}
          </div>
        </div>
      </AewitaShell>
      <Cursor x={cursor.x} y={cursor.y} clicking={cursor.clicking} scale={cursor.scale} />
    </Camera>
  );
}

function TokenCard({ t, tokenGenerated }) {
  const fullToken = 'aew_sk_live_8k2j••••••••••••••••••••••••••••••7f9b';
  const revealed = tokenGenerated
    ? Math.min(fullToken.length, Math.floor((t - 1.25) * 60))
    : 0;
  const tokenDisplay = fullToken.slice(0, revealed);

  return (
    <div style={{
      padding: 20,
      background: COLORS.bgCard,
      border: `1px solid ${COLORS.border}`,
      borderRadius: 12,
      opacity: spring(t, 0, 1, 0.1, Springs.snappy),
      transform: `translateY(${(1 - spring(t, 0, 1, 0.1, Springs.snappy)) * 10}px)`,
    }}>
      <div style={{ fontSize: 15, fontWeight: 600, color: COLORS.textPrimary }}>MCP Access Tokens</div>
      <div style={{ fontSize: 12, color: COLORS.textMuted, marginTop: 4, marginBottom: 16 }}>
        Generate tokens to authenticate external MCP clients with Aewita.
      </div>
      {!tokenGenerated ? (
        <button style={{
          padding: '10px 18px',
          background: COLORS.copperDim,
          border: `1px solid ${COLORS.copper}`,
          borderRadius: 8,
          color: COLORS.textPrimary,
          fontSize: 13, fontWeight: 500,
          transform: `scale(${t >= 1.1 && t < 1.15 ? 0.96 : 1})`,
        }}>Generate MCP Token</button>
      ) : (
        <div style={{
          padding: 12,
          background: COLORS.bgSunken,
          border: `1px solid ${COLORS.border}`,
          borderRadius: 8,
          opacity: Math.min(1, spring(t, 0, 1, 1.15, { stiffness: 260, damping: 22 })),
          transform: `translateY(${(1 - Math.min(1, spring(t, 0, 1, 1.15, Springs.snappy))) * 8}px)`,
          boxShadow: t < 2.0 ? `0 0 ${18 - 8 * (t - 1.2)}px rgba(120,179,124,${Math.max(0, 0.3 - (t - 1.2) * 0.3)})` : 'none',
        }}>
          <div style={{ fontSize: 11, color: COLORS.textMuted, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>Token · reeves-litigation</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              flex: 1, fontFamily: FONTS.mono, fontSize: 12,
              color: COLORS.copper, letterSpacing: '0.02em',
              minHeight: 18,
            }}>
              {tokenDisplay}
              {revealed < fullToken.length && (
                <span style={{
                  display: 'inline-block', width: 1.5, height: 12,
                  background: COLORS.copper, verticalAlign: 'middle', marginLeft: 1,
                  opacity: Math.sin(t * 8) > 0 ? 1 : 0,
                }}/>
              )}
            </div>
            <div style={{
              padding: '4px 10px', borderRadius: 6,
              background: 'rgba(120,179,124,0.15)',
              color: COLORS.sage,
              fontSize: 10, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
              opacity: revealed >= fullToken.length ? 1 : 0,
              transform: `scale(${revealed >= fullToken.length ? 1 : 0.8})`,
              transition: 'opacity 200ms, transform 200ms',
            }}>Active</div>
          </div>
          <div style={{ fontSize: 10, color: COLORS.textMuted, fontFamily: FONTS.mono, marginTop: 8 }}>
            scope: library.read, assistant.run, scrivener.draft · expires 2026-07-19
          </div>
        </div>
      )}
    </div>
  );
}

function ClaudeDesktopWindow({ t }) {
  const msg = "Search the Reeves matter for any contract language on indemnification carve-outs and draft a rebuttal citing Texas authority.";
  const typedMsg = typewrite(msg, t, 0.3, 58);
  const submitted = t > 2.4;
  const tools = [
    { name: 'aewita.library.search', t: 2.6 },
    { name: 'aewita.library.query', t: 3.0 },
    { name: 'aewita.assistant.run', t: 3.4 },
  ];

  return (
    <div style={{
      height: '100%',
      background: '#2B2825',
      border: `1px solid rgba(255,255,255,0.1)`,
      borderRadius: 10,
      boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        height: 34, flexShrink: 0,
        background: '#1F1D1B',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
        display: 'flex', alignItems: 'center',
        padding: '0 12px', gap: 8,
      }}>
        <div style={{ display: 'flex', gap: 6 }}>
          <div style={{ width: 10, height: 10, borderRadius: 5, background: '#ff5f57' }}/>
          <div style={{ width: 10, height: 10, borderRadius: 5, background: '#febc2e' }}/>
          <div style={{ width: 10, height: 10, borderRadius: 5, background: '#28c840' }}/>
        </div>
        <div style={{ flex: 1, textAlign: 'center', fontSize: 11, color: '#aaa', fontFamily: FONTS.sans }}>
          AI Assistant · Desktop
        </div>
      </div>

      <div style={{ flex: 1, padding: 16, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{
          padding: '8px 12px',
          background: 'rgba(120,179,124,0.1)',
          border: '1px solid rgba(120,179,124,0.25)',
          borderRadius: 6,
          fontSize: 10, fontFamily: FONTS.mono,
          color: COLORS.sage,
          display: 'flex', alignItems: 'center', gap: 8,
          opacity: spring(t, 0, 1, 0, Springs.snappy),
        }}>
          <div style={{ width: 6, height: 6, borderRadius: 3, background: COLORS.sage }}/>
          MCP connected · your-firm.aewita.local · 4 tools available
        </div>

        <div style={{
          padding: '12px 14px',
          background: '#3A3633',
          border: '1px solid rgba(255,255,255,0.06)',
          borderRadius: 10,
          fontSize: 12, lineHeight: 1.5, color: '#e8e0d8',
          maxWidth: '85%', alignSelf: 'flex-end',
          opacity: spring(t, 0, 1, 0.2, Springs.snappy),
          transform: `translateY(${(1 - spring(t, 0, 1, 0.2, Springs.snappy)) * 6}px)`,
        }}>
          {typedMsg}
          {typedMsg.length < msg.length && typedMsg.length > 0 && (
            <span style={{
              display: 'inline-block', width: 1, height: 12,
              background: '#fff', marginLeft: 1, verticalAlign: 'middle',
              opacity: Math.sin(t * 8) > 0 ? 1 : 0,
            }}/>
          )}
        </div>

        {submitted && tools.map((tool, i) => {
          const p = spring(t, 0, 1, tool.t, { stiffness: 280, damping: 22 });
          const complete = t > tool.t + 0.6;
          const checkP = clampN(spring(t, 0, 1, tool.t + 0.6, Springs.snappy), 0, 1);
          return (
            <div key={i} style={{
              padding: '8px 12px',
              background: 'rgba(200,133,107,0.08)',
              border: `1px solid rgba(200,133,107,0.2)`,
              borderRadius: 8,
              fontSize: 11, fontFamily: FONTS.mono,
              color: COLORS.copper,
              opacity: Math.min(1, p),
              transform: `translateX(${(1 - Math.min(1, p)) * -10}px)`,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <span>→ {tool.name}()</span>
              <span style={{ color: complete ? COLORS.sage : COLORS.copper, fontSize: 10,
                             opacity: complete ? checkP : 1 }}>
                {complete ? '✓ 200 OK' : (
                  <span style={{ display: 'inline-block', transform: `rotate(${t * 360}deg)` }}>◐</span>
                )}
              </span>
            </div>
          );
        })}

        {t > 4.0 && (
          <div style={{
            padding: '12px 14px',
            fontSize: 12, lineHeight: 1.6,
            color: '#d4ccc2',
            opacity: spring(t, 0, 1, 4.0, Springs.gentle),
            transform: `translateY(${(1 - spring(t, 0, 1, 4.0, Springs.gentle)) * 6}px)`,
          }}>
            Found 7 indemnification carve-outs across 4 vendor agreements in the Reeves matter. Drafting a rebuttal citing <span style={{ color: COLORS.copper, borderBottom: `1px solid ${COLORS.copper}`}}>FPL Energy v. TXU</span>…
          </div>
        )}

        <div style={{ flex: 1 }}/>

        <div style={{
          fontSize: 10, color: '#7a756f', fontFamily: FONTS.mono,
          textAlign: 'center', paddingTop: 8,
          borderTop: '1px solid rgba(255,255,255,0.05)',
        }}>
          All retrieval stays on-prem · zero data leaves the firm
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SceneMCP });