// scene-uat.jsx — Phase 6 · UAT (test list ticking)
// 0–3   pipeline pulse (active=5) → notebook frame draws
// 3–13  Test rows tick through, ✓ stamps land one by one (one ✗ on test 4)
// 13–17 "Fix in code → re-run → ✓" footnote, then test 4 flips to ✓
// 17–22 SHIPPED stamp lands

function SceneUAT() {
  return (
    <Timeline duration={20800} sceneId="uat" label="Phase 6 — UAT">
      <CaptionScene>
        <div className="scene-bg scene-cream-bg" />

        <PhaseIntroCard
          from={0}
          num="06"
          name="UAT"
          who="😍 Human only"
          tone="cream"
          summary="Walk through as every user. Find what the method missed. Fix it."
        />

        <TimeShift offset={4800}>
          <UATPipelinePulse />
          <UATNotebook />
          <UATShipped />

          <SceneCaption text="Walk through as every user." from={1800} typeDur={1100} hold={1100} />
          <SceneCaption text="Find what the method missed." from={4200} typeDur={1100} hold={1100} />
          <SceneCaption text="Fix it. Re-run. Ship." from={11200} typeDur={1100} hold={1500} />
        </TimeShift>
      </CaptionScene>
    </Timeline>
  );
}

function UATPipelinePulse() {
  const t = useT();
  if (t > 3500) return null;
  const op = t < 600 ? t / 600 : (t > 2900 ? 1 - (t - 2900) / 600 : 1);
  return (
    <div style={{ position: 'absolute', top: 36, left: 0, right: 0, opacity: op, zIndex: 5 }}>
      <PipelineBar active={5} />
    </div>
  );
}

function UATNotebook() {
  const t = useT();
  if (t < 1000) return null;
  const op = Math.min(1, (t - 1000) / 600);

  const tests = [
    { n: 1, label: 'Broker submits a deal',         from: 3000,  pass: true  },
    { n: 2, label: 'CIO reviews QVP',                from: 3800,  pass: true  },
    { n: 3, label: 'Terms alignment',                from: 4600,  pass: true  },
    { n: 4, label: 'AI Underwriter',                 from: 5400,  pass: false, note: 'hallucinated loan amount', flipFrom: 12200 },
    { n: 5, label: 'Hard minimum violation',         from: 6500,  pass: true  },
  ];

  return (
    <div style={{
      position: 'absolute',
      top: 220, left: '50%', transform: 'translateX(-50%)',
      width: 1400, height: 720,
      background: 'var(--cream-paper)',
      border: '1px solid var(--cream-rule)',
      borderRadius: 8,
      padding: '48px 64px',
      boxShadow: '0 24px 60px -28px rgba(80,60,30,0.25)',
      opacity: op,
    }}>
      <div style={{
        position: 'absolute', top: -14, left: 32,
        fontFamily: 'var(--font-mono)', fontSize: 14,
        background: 'var(--cream-paper)', padding: '4px 10px',
        color: 'var(--ink-faint)',
        letterSpacing: '0.18em', textTransform: 'uppercase',
      }}>UAT · Test Script</div>

      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 24,
      }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 18,
          color: 'var(--ink-faint)', letterSpacing: '0.18em',
          textTransform: 'uppercase',
        }}>Phase 06 · User Acceptance Testing</div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 14,
          color: 'var(--ink-faint)', letterSpacing: '0.14em',
        }}>😍 Human</div>
      </div>

      <div style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontSize: 26, color: 'var(--ink-soft)', marginBottom: 36,
      }}>
        Walk through as every user. Find what the method missed.
      </div>

      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 24, lineHeight: 2.1 }}>
        {tests.map((te) => {
          if (t < te.from) return null;
          const rowOp = Math.min(1, (t - te.from) / 280);
          // Determine displayed pass state (test 4 may flip)
          const flipped = te.flipFrom && t > te.flipFrom;
          const showPass = te.pass || flipped;
          const markFrom = te.from + 700;
          const markVisible = t > markFrom;
          const markOp = Math.min(1, (t - markFrom) / 200);
          // For test 4, when flipping, animate
          const flipOp = flipped ? Math.min(1, (t - te.flipFrom) / 400) : 0;
          return (
            <div key={te.n} style={{
              display: 'flex', alignItems: 'center', gap: 28, color: 'var(--ink)',
              opacity: rowOp,
            }}>
              <span style={{ width: 96, color: 'var(--ink-faint)' }}>TEST {String(te.n).padStart(2, '0')}</span>
              <span style={{ flex: 1 }}>
                <Typewriter text={te.label} from={te.from} duration={500} caret={false} />
              </span>
              {markVisible && !flipped && (
                <span style={{
                  color: te.pass ? 'var(--success-green)' : 'var(--error-red)',
                  fontSize: 32, fontWeight: 700,
                  opacity: markOp,
                  transform: `scale(${0.6 + 0.4 * markOp})`,
                  display: 'inline-block',
                  width: 36, textAlign: 'center',
                }}>{te.pass ? '✓' : '✗'}</span>
              )}
              {flipped && (
                <span style={{
                  color: 'var(--success-green)',
                  fontSize: 32, fontWeight: 700,
                  width: 36, textAlign: 'center',
                  opacity: flipOp,
                  transform: `scale(${0.7 + 0.3 * flipOp})`,
                  display: 'inline-block',
                }}>✓</span>
              )}
              <span style={{
                width: 360,
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                fontSize: 18, color: 'var(--ink-faint)',
              }}>
                {te.note && !flipped ? `— ${te.note}` : ''}
                {te.note && flipped && (
                  <span style={{ color: 'var(--success-green)' }}>— fixed</span>
                )}
              </span>
            </div>
          );
        })}
      </div>

      {/* Footnote: "fix → re-run → ✓" appears around 10s */}
      <Show from={10000} fadeIn={400}>
        <div style={{
          position: 'absolute', bottom: 76, left: 80,
          fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          color: 'var(--ink-soft)', fontSize: 22,
        }}>
          Test 4 → fix in code → re-run → ✓
        </div>
      </Show>
    </div>
  );
}

function UATShipped() {
  const t = useT();
  if (t < 13400) return null;
  // Land with a slight overshoot
  const p = Math.min(1, (t - 13400) / 700);
  const scale = 1 + 0.18 * Math.sin(p * Math.PI) * (1 - p * 0.6);
  const op = Math.min(1, (t - 13400) / 400);
  return (
    <div style={{
      position: 'absolute', right: 200, bottom: 320,
      transform: `rotate(-6deg) scale(${scale})`,
      transformOrigin: 'center',
      opacity: op,
      zIndex: 6,
    }}>
      <div style={{
        padding: '14px 28px',
        border: '4px solid var(--success-green)',
        color: 'var(--success-green)',
        fontFamily: 'var(--font-mono)',
        fontSize: 56, fontWeight: 700,
        letterSpacing: '0.18em',
        background: 'rgba(255, 252, 248, 0.85)',
        boxShadow: '0 8px 32px rgba(46,125,50,0.2)',
      }}>SHIPPED</div>
    </div>
  );
}

window.SceneUAT = SceneUAT;