// scene-ffd.jsx — Phase 3 · FFD (Functional Functional Design)
// Same vocab as Act III: notebook left, terminal right, mini eval call-back.
// 0–4   pipeline pulse → BRD card slides in (callback)
// 4–9   "Take BRD. Add the form-level detail." prompt + FFD draft generates
// 9–14  Mini eval loop (3 small chips: ↻ EVAL ✓) — fast, lower-third
// 14–18 ✓ FFD locked

function SceneFFD() {
  return (
    <Timeline duration={22800} sceneId="ffd" label="Phase 3 — FFD">
      <CaptionScene>
        <div className="scene-bg" style={{ position: 'absolute', inset: 0 }}>
          <div className="scene-cream-bg" style={{ right: '50%' }} />
          <div className="scene-terminal-bg" style={{ left: '50%' }} />
        </div>

        <PhaseIntroCard
          from={0}
          num="03"
          name="FFD"
          who="😍 Human + 🤖 Claude"
          tone="cream"
          summary="Expand every requirement into form-level detail: fields, validation, error states."
        />

        <TimeShift offset={4800}>
          <FFDPipelinePulse />
          <FFDSplit />
          <FFDMiniEval />
          <FFDFinal />

          <SceneCaption text="Take the BRD. Add form-level detail." from={2400} typeDur={1300} hold={1600} />
          <SceneCaption text="Field types. Validation rules. Error states." from={5800} typeDur={1500} hold={1700} terminal />
          <SceneCaption text="Same Evaluation Loop. Same lock-down." from={10800} typeDur={1300} hold={1500} />
        </TimeShift>
      </CaptionScene>
    </Timeline>
  );
}

// ── 0–4s — pipeline pulse highlights phase 03 ───────────────
function FFDPipelinePulse() {
  const t = useT();
  if (t > 4000) return null;
  const op = t < 600 ? t / 600 : (t > 3400 ? 1 - (t - 3400) / 600 : 1);
  return (
    <div style={{
      position: 'absolute', top: 36, left: 0, right: 0,
      opacity: op, zIndex: 5,
    }}>
      <PipelineBar active={2} />
    </div>
  );
}

// ── 0–14s — split: notebook (BRD callback → FFD draft) | terminal (prompt) ──
function FFDSplit() {
  const t = useT();
  if (t > 14400) return null;
  const op = t > 14000 ? Math.max(0, 1 - (t - 14000) / 400) : 1;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: op }}>
      {/* LEFT — notebook */}
      <div style={{
        position: 'absolute', top: 130, left: 90, width: 820, bottom: 130,
        background: 'var(--cream-paper)',
        border: '1px solid var(--cream-rule)',
        borderRadius: 8,
        padding: '40px 48px',
        boxShadow: '0 24px 60px -28px rgba(80,60,30,0.25)',
      }}>
        {/* tag */}
        <div style={{
          position: 'absolute', top: -14, left: 32,
          fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--ink-faint)',
          background: 'var(--cream-paper)', padding: '4px 10px',
          letterSpacing: '0.18em', textTransform: 'uppercase',
        }}>Phase 3 · FFD</div>

        {/* "from BRD" callback chip */}
        <FFDFromBRD />
        {/* arrow + outcome */}
        <FFDDraft />
      </div>

      {/* RIGHT — terminal */}
      <div style={{
        position: 'absolute', top: 130, right: 90, width: 820, bottom: 130,
        padding: '40px 36px',
        fontFamily: 'var(--font-mono)', fontSize: 22, lineHeight: 1.55,
        color: 'var(--term-green)',
      }}>
        <div style={{ color: 'var(--term-green-dim)', textTransform: 'uppercase', letterSpacing: '0.18em', fontSize: 14, marginBottom: 24 }}>
          claude · ffd · session 02
        </div>

        <Show from={1200}>
          <div style={{ marginBottom: 14 }}>
            <span style={{ color: 'var(--term-amber)' }}>$</span>{' '}
            <Typewriter text="claude --use brd.md, charter.md" from={1400} duration={1400} />
          </div>
        </Show>

        <Show from={3200}>
          <div style={{ marginBottom: 14 }}>
            <span style={{ color: 'var(--term-amber)' }}>$</span>{' '}
            <Typewriter text='> "expand each FR into form-level FFs"' from={3400} duration={1900} />
          </div>
        </Show>

        <Show from={5800} fadeIn={300}>
          <div style={{ color: 'var(--term-green-dim)', marginTop: 10 }}>
            generating ffd.md…
          </div>
        </Show>

        {/* live counter ticking up */}
        <FFDCounter />

        {/* "drafted" lines streaming */}
        <FFDDraftLines />
      </div>
    </div>
  );
}

function FFDFromBRD() {
  const t = useT();
  if (t < 600) return null;
  const op = Math.min(1, (t - 600) / 500);
  const ty = (1 - op) * 12;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      padding: '8px 16px',
      background: 'rgba(184,92,56,0.08)',
      border: '1px solid var(--orange)',
      borderRadius: 4,
      fontFamily: 'var(--font-mono)', fontSize: 16,
      color: 'var(--orange)', letterSpacing: '0.06em',
      opacity: op, transform: `translateY(${ty}px)`,
    }}>
      <span style={{ fontSize: 14, color: 'var(--ink-faint)' }}>↑ from</span>
      <span style={{ fontWeight: 700 }}>BRD v1.0 ✓</span>
      <span style={{ fontSize: 14, color: 'var(--ink-faint)' }}>89 FRs</span>
    </div>
  );
}

function FFDCounter() {
  const t = useT();
  if (t < 6800) return null;
  const total = 247;
  const target = t < 8400 ? Math.min(total, Math.floor((t - 6800) / 1600 * total)) : total;
  return (
    <div style={{
      marginTop: 22, fontSize: 22,
    }}>
      <span className="dim" style={{ color: 'var(--term-green-dim)' }}>FFs drafted: </span>
      <span style={{ fontWeight: 700, color: 'var(--term-green)' }}>{target} / {total}</span>
      {t < 8400 && <span style={{ animation: 'blink 0.8s step-end infinite' }}>_</span>}
    </div>
  );
}

function FFDDraftLines() {
  const t = useT();
  if (t < 7400) return null;
  const lines = [
    { from: 7400, text: 'FF-014a · loan_amount · numeric · req · min: $250K' },
    { from: 7900, text: 'FF-014b · loan_amount · onBlur → DSCR recalc' },
    { from: 8400, text: 'FF-014c · loan_amount · err: "below minimum"' },
    { from: 8900, text: 'FF-022a · property_state · select · from XLSX' },
    { from: 9300, text: 'FF-062a · matrix_score · derived · readonly' },
  ];
  return (
    <div style={{ marginTop: 22 }}>
      {lines.map((ln, i) => {
        if (t < ln.from) return null;
        const op = Math.min(1, (t - ln.from) / 200);
        return (
          <div key={i} style={{ opacity: op, fontSize: 18, lineHeight: 1.55, color: 'var(--term-green-dim)' }}>
            <span style={{ color: 'var(--success-green)' }}>✓</span>{' '}
            <Typewriter text={ln.text} from={ln.from} duration={300} caret={false} />
          </div>
        );
      })}
    </div>
  );
}

function FFDDraft() {
  const t = useT();
  if (t < 8800) return null;
  const op = Math.min(1, (t - 8800) / 500);

  return (
    <div style={{ marginTop: 36, opacity: op }}>
      <div style={{
        fontFamily: 'var(--font-serif)', fontSize: 28, color: 'var(--ink)',
        marginBottom: 20,
      }}>
        Result:
      </div>

      <div style={{
        background: '#FFF',
        border: '2px solid var(--orange)',
        borderRadius: 6,
        padding: '24px 28px',
        boxShadow: '0 12px 28px -16px rgba(184,92,56,0.4)',
      }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--ink-faint)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
          ffd v1.0 · draft
        </div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 36, fontWeight: 700,
          color: 'var(--orange)', marginTop: 6, letterSpacing: '0.04em',
        }}>
          247 form-fields
        </div>
        <div style={{
          fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontSize: 18, color: 'var(--ink-soft)', marginTop: 8,
        }}>
          Every input. Every state. Every error.
        </div>
      </div>
    </div>
  );
}

// ── 9.5–14s — mini eval loop callback ──────────────────────
function FFDMiniEval() {
  const t = useT();
  if (t < 9700 || t > 14200) return null;
  const op = t < 10300 ? (t - 9700) / 600 : (t > 13700 ? 1 - (t - 13700) / 500 : 1);

  // Three small horizontal chips: BRD-style mini eval
  const chips = [
    { label: 'FFD v1.0',          from: 9800,  pulse: 9900 },
    { label: '↻ EVALUATION LOOP', from: 10800, pulse: 11000 },
    { label: 'FINDINGS',          from: 11800, pulse: 12000 },
    { label: 'FFD v1.1 ✓',        from: 13000, pulse: 13100, ok: true },
  ];

  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 200,
      display: 'flex', justifyContent: 'center', gap: 24,
      opacity: op,
      zIndex: 4,
    }}>
      {chips.map((c, i) => {
        if (t < c.from) return null;
        const cop = Math.min(1, (t - c.from) / 300);
        const ty = (1 - cop) * 10;
        const isLast = i === chips.length - 1;
        return (
          <React.Fragment key={i}>
            {i > 0 && t > c.from - 100 && (
              <div style={{
                display: 'flex', alignItems: 'center',
                fontFamily: 'var(--font-mono)', fontSize: 24,
                color: 'var(--orange)',
                opacity: Math.min(1, (t - (c.from - 200)) / 200),
              }}>→</div>
            )}
            <div style={{
              padding: '14px 22px',
              background: c.ok ? 'rgba(46,125,50,0.08)' : 'rgba(184,92,56,0.06)',
              border: `2px solid ${c.ok ? 'var(--success-green)' : 'var(--orange)'}`,
              borderRadius: 4,
              fontFamily: 'var(--font-mono)',
              fontSize: 22, fontWeight: 700,
              color: c.ok ? 'var(--success-green)' : 'var(--orange)',
              letterSpacing: '0.06em',
              opacity: cop,
              transform: `translateY(${ty}px)`,
              boxShadow: isLast ? '0 8px 22px -10px rgba(46,125,50,0.4)' : 'none',
            }}>
              {c.label}
            </div>
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ── 14.5–18s — ✓ FFD locked
function FFDFinal() {
  const t = useT();
  if (t < 14500) return null;
  const op = Math.min(1, (t - 14500) / 600);
  const ty = (1 - op) * 24;
  return (
    <div style={{
      position: 'absolute',
      left: 0, right: 0, top: 380,
      textAlign: 'center',
      opacity: op,
      transform: `translateY(${ty}px)`,
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 24,
        color: 'var(--ink-faint)', letterSpacing: '0.22em',
        textTransform: 'uppercase',
      }}>
        Phase 3 · locked
      </div>
      <div style={{
        fontFamily: 'var(--font-serif)',
        fontSize: 200, fontWeight: 700,
        color: 'var(--success-green)', lineHeight: 1,
        margin: '24px 0 16px',
      }}>
        ✓ FFD
      </div>
      <div style={{
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontSize: 32, color: 'var(--ink-soft)',
      }}>
        247 form-fields. Every error state.
      </div>
    </div>
  );
}

window.SceneFFD = SceneFFD;