// act4-paquete.jsx — Acto 4 (26.25s): Paquete USCIS end-to-end.
//
// Outer Sprite window: 140.75 – 167 (26.25s, extended +3s on Print so impresora 4D respira).
// Inner Sprites are now aligned with outer.
//
// Sub-timeline (absolute global times):
//   140.75-142.75  Hub 5 botones → cursor click "Formas prellenadas"     (2.0s)
//   142.75-148.75  I-130 PDF auto-llenándose                              (6.0s)
//   148.75-153.75  Evidencia drop (7 docs, 1 heredado)                    (5.0s)
//   153.75-157.75  Organizar paquete (drag-reorder)                       (4.0s)
//   157.75-161.25  Cover Letter typewriter                                (3.5s)
//   161.25-167.00  Print outputs (sobre + etiquetas + email + WhatsApp)   (5.75s, +3s hold)
//
// Callout copy designed by JP: F2 pass focuses on REVIEW (preparador siempre
// revisa lo que escribe la AI) + AUTOMATIC cover letter messaging.

function Act4Paquete() {
  const { localTime } = useSprite();
  return (
    <>
      <Sprite start={140.75} end={142.75}>
        <Scene4a_Hub />
      </Sprite>
      <Sprite start={142.75} end={148.75}>
        <Scene4b_FormaI130 />
      </Sprite>
      <Sprite start={148.75} end={153.75}>
        <Scene4c_Evidencia />
      </Sprite>
      <Sprite start={153.75} end={157.75}>
        <Scene4d_Organizar />
      </Sprite>
      <Sprite start={157.75} end={161.25}>
        <Scene4e_CoverLetter />
      </Sprite>
      <Sprite start={161.25} end={167}>
        <Scene4f_Print />
      </Sprite>

      {/* Callouts — outer-local times (outer Sprite starts at 140.75).
          Each callout sits within its scene's window. */}
      <CalloutsTrack localTime={localTime} callouts={[
        // Scene 4b FormaI130 (local 2-8): REVISIÓN HUMANA — left, doesn't cover form
        { appearAt: 2.5,  duration: 4.5,  icon: '✋', position: 'top-left',  tKey: 'revision_humana' },

        // Scene 4c Evidencia (local 8-13): Sophia auto-clasifica — left
        { appearAt: 8.5,  duration: 4.0,  icon: '✨', position: 'top-left',  tKey: 'sophia_auto_clasifica' },

        // Scene 4d Organizar (local 13-17): Tú decides el orden — right (cursor drags on left)
        { appearAt: 13.5, duration: 3.5,  icon: '🔄', position: 'top-right', tKey: 'tu_decides_orden' },

        // Scene 4e CoverLetter (local 17-20.5): Cover letter automática — right (editor on left)
        { appearAt: 17.5, duration: 3.0,  icon: '📝', position: 'top-right', tKey: 'cover_letter_auto' },

        // Scene 4f Print (local 20.5-26.25): 1 click = todo — right (extended hold)
        { appearAt: 20.7, duration: 5.55, icon: '🖨', position: 'top-right', tKey: 'un_click_todo' },
      ]} />
    </>
  );
}

// ── 4a Hub 5 botones ──────────────────────────────────────────────────
function Scene4a_Hub() {
  const { localTime, duration } = useSprite();
  const hover = (localTime >= 0.8 && localTime < 1.55) ? 'formas' : null;
  const clicked = (localTime >= 1.5 && localTime < 1.85) ? 'formas' : null;
  const opacity = fadeInOut(localTime, duration, 0.3, 0.2);
  return (
    <Wrap opacity={opacity}>
      <HubFiveButtons activeButton={hover} clickedButton={clicked} />
      {/* Cursor */}
      <LocalCursorTrack actStart={140.75} track={[
        { t: 0.4, x: 480, y: 380 },                  // appear
        { t: 0.9, x: 100, y: 310 },                  // move to Formas button (col 0)
        { t: 1.55, x: 100, y: 310, click: true },    // click
      ]} />
    </Wrap>
  );
}

// ── 4b I-130 PDF auto-fill ────────────────────────────────────────────
function Scene4b_FormaI130() {
  const { localTime, duration } = useSprite();
  // 6s total: 0.3s fade in, 4.5s typewriter, 1.2s hold
  const fillProgress = clamp((localTime - 0.3) / 4.5, 0, 1);
  const syncedCount = Math.floor(fillProgress * I130_FIELDS.length);
  const opacity = fadeInOut(localTime, duration, 0.3, 0.2);
  return (
    <Wrap opacity={opacity}>
      <FormaI130 fillProgress={fillProgress} syncedCount={syncedCount} />

      {/* At the end of the scene, cursor briefly visible going to "Evidencia" button (off-screen) */}
      <LocalCursorTrack actStart={137.75} track={[
        { t: 7.4, x: 280, y: 60 },                   // appears near top header (hint: next sub-scene)
        { t: 7.8, x: 280, y: 60, click: true },
      ]} />
    </Wrap>
  );
}

// ── 4c Evidencia drop (7 docs) ────────────────────────────────────────
function Scene4c_Evidencia() {
  const { localTime, duration } = useSprite();
  // 5s scene: 0.3s fade in, 4s docs dropping, 0.7s hold
  const N = EVIDENCE_DOCS.length;
  const STAGGER = 0.45;
  const FLY_DUR = 0.5;
  const docsProgress = EVIDENCE_DOCS.map((_, i) => {
    const start = 0.4 + i * STAGGER;
    return clamp((localTime - start) / FLY_DUR, 0, 1);
  });
  const opacity = fadeInOut(localTime, duration, 0.3, 0.2);

  return (
    <Wrap opacity={opacity}>
      <EvidenciaDrop docsProgress={docsProgress} />

      {/* Cursor at the end clicks "Organizar" */}
      <LocalCursorTrack actStart={137.75} track={[
        { t: 12.6, x: 380, y: 60 },                   // appear at top header
        { t: 12.95, x: 380, y: 60, click: true },     // click (signaling transition)
      ]} />
    </Wrap>
  );
}

// ── 4d Organizar (drag-reorder) ───────────────────────────────────────
function Scene4d_Organizar() {
  const { localTime, duration } = useSprite();
  // 4s scene: 0.3s fade in
  // We perform 2 drag operations to demonstrate reordering:
  //   Drag 1: 0.7-1.7s — pos 5 (I-130) → pos 3 (after Cover Letter)
  //   Drag 2: 2.0-3.0s — pos 6 (I-864) → pos 5
  // Final order: G-1450, Checklist, Cover, I-130, I-130A, I-864, I-485
  let order = [0,1,2,3,4,5,6]; // original
  let draggingIdx = null;
  let draggingY = 0;

  if (localTime >= 0.7 && localTime <= 1.7) {
    // Drag pos 5 (I-130, idx=5) toward pos 3
    const p = (localTime - 0.7) / 1.0;
    const e = Easing.easeInOutCubic(p);
    draggingIdx = 5;
    draggingY = -2 * 64 * e; // moving up 2 slots × 64px per row
    if (p > 0.5) {
      // Halfway through, swap into the order
      order = [0,1,2,5,3,4,6];
      draggingIdx = 3;
      draggingY = (1 - e * 2) * 64 * -1;
    }
  } else if (localTime > 1.7) {
    order = [0,1,2,5,3,4,6];
  }

  if (localTime >= 2.2 && localTime <= 3.2) {
    // Drag pos 6 (I-864, idx=6) up to pos 5
    const p = (localTime - 2.2) / 1.0;
    const e = Easing.easeInOutCubic(p);
    draggingIdx = 6;
    draggingY = -1 * 64 * e;
    if (p > 0.5) {
      order = [0,1,2,5,3,6,4];
      draggingIdx = 5;
      draggingY = (1 - e * 2) * 64 * -1;
    }
  } else if (localTime > 3.2) {
    order = [0,1,2,5,3,6,4];
  }

  const opacity = fadeInOut(localTime, duration, 0.3, 0.2);
  return (
    <Wrap opacity={opacity}>
      <OrganizarDrag order={order} draggingIdx={draggingIdx} draggingY={draggingY} />

      <LocalCursorTrack actStart={137.75} track={[
        // Show cursor at drag-handle of pos 5 (I-130 originally) during 0.7-1.7
        { t: 13.5, x: 50, y: 405 },                   // approach handle of I-130 (row 5)
        { t: 13.7, x: 50, y: 405 },                   // start drag
        { t: 14.2, x: 50, y: 280, click: true },      // dropped at new position
        // Then handle of I-864
        { t: 14.9, x: 50, y: 470 },
        { t: 15.2, x: 50, y: 410, click: true },
        // Finally cursor clicks "Cover Letter" to transition
        { t: 16.5, x: 870, y: 60 },
        { t: 16.85, x: 870, y: 60, click: true },
      ]} />
    </Wrap>
  );
}

// ── 4e Cover Letter typewriter ────────────────────────────────────────
function Scene4e_CoverLetter() {
  const { localTime, duration } = useSprite();
  // 3.5s scene: 0.3s fade in, 2.7s typing, 0.5s hold
  const fullText = COVER_PARAGRAPHS.join('\n');
  const typeP = clamp((localTime - 0.3) / 2.7, 0, 1);
  const typedChars = Math.floor(fullText.length * typeP);
  const opacity = fadeInOut(localTime, duration, 0.3, 0.2);
  return (
    <Wrap opacity={opacity}>
      <CoverLetterEditor typedChars={typedChars} />

      {/* Cursor at end clicks "Imprimir" */}
      <LocalCursorTrack actStart={137.75} track={[
        { t: 20.1, x: 1130, y: 60 },                  // approach Imprimir button (top of header)
        { t: 20.4, x: 1130, y: 60, click: true },
      ]} />
    </Wrap>
  );
}

// ── 4f Print outputs ──────────────────────────────────────────────────
function Scene4f_Print() {
  const { localTime, duration } = useSprite();
  // 5.75s scene: 0.3s fade in, 2.0s outputs animating (progress 0→1),
  // 3.15s hold at final state (all 4 outputs visible + summary pill), 0.3s fade out
  const progress = clamp((localTime - 0.2) / 2.0, 0, 1);
  const opacity = fadeInOut(localTime, duration, 0.3, 0.3);
  return (
    <Wrap opacity={opacity}>
      <PrintOutputs progress={progress} />
    </Wrap>
  );
}

Object.assign(window, { Act4Paquete });