// scene6_report.jsx — 247 devices collapse into report document; pages flip
// Window: 60 – 72s

function Scene6Report({ start = 60, end = 72 }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const entryP = clamp(localTime / 0.8, 0, 1);
        const exitP = clamp((localTime - 11.0) / 1.0, 0, 1);

        // Phase 1 (0 - 3s): 247 devices scatter across canvas, all APPROVED
        // Phase 2 (3 - 5s): they collapse inward into a stacking point
        // Phase 3 (5 - 9s): report pages fly in, numbers tick up
        // Phase 4 (9 - 12s): final signoff stamp

        const collapseP = clamp((localTime - 2.4) / 1.4, 0, 1);
        const reportIn = clamp((localTime - 4.0) / 0.8, 0, 1);
        const statsIn = clamp((localTime - 4.8) / 0.8, 0, 1);
        const pagesIn = clamp((localTime - 6.0) / 1.2, 0, 1);
        const stampIn = clamp((localTime - 9.0) / 0.8, 0, 1);

        const targetCX = 570; // inside the report doc
        const targetCY = 570;

        // Device grid positions
        const devices = React.useMemo(() => {
          const rng = mulberry32(7);
          const out = [];
          for (let i = 0; i < 247; i++) {
            out.push({
              x: 120 + rng() * 1680,
              y: 160 + rng() * 760,
              size: 4 + rng() * 6,
              delay: rng() * 0.3,
            });
          }
          return out;
        }, []);

        return (
          <>
            <HeaderStrip step="06" title="REPORT GENERATION" op={1 - exitP}/>

            {/* Scattered approved devices, collapsing */}
            <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} width={1920} height={1080}>
              {devices.map((d, i) => {
                const devDelay = d.delay;
                const p = clamp((collapseP - devDelay) / 0.8, 0, 1);
                const e = Easing.easeInOutCubic(p);
                const x = d.x + (targetCX - d.x) * e;
                const y = d.y + (targetCY - d.y) * e;
                const opacity = (1 - e) * entryP * (1 - exitP);
                const r = d.size * (1 - e * 0.7);
                return (
                  <circle key={i} cx={x} cy={y} r={r} fill={PALETTE.ink} opacity={opacity}/>
                );
              })}
            </svg>

            {/* Caption during scatter */}
            <div style={{
              position: 'absolute',
              left: 120, top: 180,
              opacity: entryP * (1 - Math.max(reportIn, exitP)),
              maxWidth: 900,
            }}>
              <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.18em', color: PALETTE.ink60, marginBottom: 14 }}>
                247 DEVICES · ALL APPROVED
              </div>
              <div style={{ fontFamily: FONT_TITLE, fontWeight: 900, fontSize: 72, color: PALETTE.ink, lineHeight: 0.92, letterSpacing: '-0.01em', textTransform: 'uppercase' }}>
                Every dot<br/>becomes a record.
              </div>
            </div>

            {/* Report document */}
            <div style={{
              position: 'absolute',
              left: 120, top: 160,
              width: 900, height: 820,
              opacity: reportIn * (1 - exitP),
              transform: `translateY(${(1 - reportIn) * 20}px)`,
              background: PALETTE.paper,
              border: `1.5px solid ${PALETTE.ink}`,
              padding: 44,
              display: 'flex', flexDirection: 'column',
            }}>
              {/* Report header */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
                <div>
                  <div style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.2em', color: PALETTE.ink60, marginBottom: 8 }}>
                    PDF REPORT · FINAL
                  </div>
                  <div style={{ fontFamily: FONT_TITLE, fontWeight: 900, fontSize: 40, color: PALETTE.ink, lineHeight: 0.9, letterSpacing: '-0.01em' }}>
                    MERIDIAN TOWER<br/>LEVEL 02
                  </div>
                </div>
                <LogoMark size={48}/>
              </div>

              <div style={{ borderTop: `1.5px solid ${PALETTE.ink}`, marginBottom: 20 }}/>

              {/* Report stats grid */}
              <div style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr',
                gap: '20px 48px',
                opacity: statsIn,
              }}>
                {[
                  { k: 'Total devices',    v: '247', unit: 'units' },
                  { k: 'Passed',           v: '241', unit: '97.5%' },
                  { k: 'Retested',         v: '006', unit: 'units' },
                  { k: 'Evidence files',   v: '1834', unit: 'attachments' },
                  { k: 'Field hours',      v: '184', unit: 'hrs' },
                  { k: 'Sign-off window',  v: '11', unit: 'days' },
                ].map((s, i) => (
                  <div key={s.k} style={{
                    opacity: clamp((statsIn * 2) - (i * 0.12), 0, 1),
                    borderTop: `1px solid ${PALETTE.ink20}`,
                    paddingTop: 10,
                  }}>
                    <div style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.12em', color: PALETTE.ink60, textTransform: 'uppercase' }}>
                      {s.k}
                    </div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 4 }}>
                      <div style={{ fontFamily: FONT_MONO, fontSize: 42, color: PALETTE.ink, fontVariantNumeric: 'tabular-nums' }}>
                        {s.v}
                      </div>
                      <div style={{ fontFamily: FONT_MONO, fontSize: 12, color: PALETTE.ink60 }}>{s.unit}</div>
                    </div>
                  </div>
                ))}
              </div>

              {/* Device list preview */}
              <div style={{
                marginTop: 28, flex: 1,
                opacity: clamp((statsIn - 0.3) / 0.7, 0, 1),
                overflow: 'hidden',
              }}>
                <div style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.2em', color: PALETTE.ink60, paddingBottom: 8, borderBottom: `1px solid ${PALETTE.ink}` }}>
                  DEVICE ROSTER · EXCERPT
                </div>
                {[
                  ['CAM-001', 'Axis P3255-LVE', 'Zone A',      'PASSED',   '14:02:11'],
                  ['CAM-014', 'Axis P3255-LVE', 'Zone B',      'APPROVED', '14:31:02'],
                  ['RDR-021', 'HID Signo 40',   'Stairwell N', 'PASSED',   '14:42:58'],
                  ['AV-006',  'QSC Q-SYS Core', 'Boardroom',   'PASSED',   '15:08:44'],
                  ['SW-044',  'Cisco C9300',    'IDF-02',      'APPROVED', '15:20:31'],
                  ['SNS-112', 'Axis T8705',     'Zone C',      'PASSED',   '15:38:06'],
                ].map((row, i) => (
                  <div key={i} style={{
                    display: 'grid',
                    gridTemplateColumns: '110px 1.2fr 1fr 110px 110px',
                    gap: 16,
                    padding: '10px 0',
                    borderBottom: `1px solid ${PALETTE.ink20}`,
                    fontFamily: FONT_MONO, fontSize: 12, color: PALETTE.ink,
                    opacity: clamp((localTime - 5.4 - i * 0.08) / 0.4, 0, 1),
                  }}>
                    <span>{row[0]}</span>
                    <span style={{ color: PALETTE.ink80 }}>{row[1]}</span>
                    <span style={{ color: PALETTE.ink60 }}>{row[2]}</span>
                    <span style={{ letterSpacing: '0.1em' }}>{row[3]}</span>
                    <span style={{ color: PALETTE.ink60, fontVariantNumeric: 'tabular-nums' }}>{row[4]}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Fanned page stack on right */}
            <div style={{
              position: 'absolute',
              right: 120, top: 200,
              width: 600, height: 780,
              opacity: pagesIn * (1 - exitP),
              perspective: 1200,
            }}>
              {[0, 1, 2, 3].map(i => (
                <div key={i} style={{
                  position: 'absolute',
                  inset: 0,
                  background: PALETTE.paper,
                  border: `1px solid ${PALETTE.ink}`,
                  transform: `translate(${i * 14}px, ${-i * 18}px) rotate(${(3 - i) * 1.5}deg)`,
                  transformOrigin: 'bottom left',
                  boxShadow: i === 0 ? 'none' : `inset 0 0 0 1px ${PALETTE.paper}`,
                  padding: 28,
                  opacity: clamp((pagesIn * 4) - i, 0, 1),
                }}>
                  <div style={{ fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.2em', color: PALETTE.ink60 }}>
                    PAGE {String(i + 2).padStart(2, '0')} / 14
                  </div>
                  <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {Array.from({ length: 14 }).map((_, r) => (
                      <div key={r} style={{
                        height: 8,
                        background: PALETTE.ink20,
                        width: `${50 + ((r * 17) % 50)}%`,
                      }}/>
                    ))}
                  </div>
                </div>
              ))}

              {/* Approval stamp */}
              <div style={{
                position: 'absolute',
                right: 40, bottom: 40,
                transform: `rotate(-8deg) scale(${stampIn})`,
                opacity: stampIn,
                border: `3px solid ${PALETTE.ink}`,
                padding: '14px 22px',
                background: 'rgba(244, 242, 237, 0.9)',
              }}>
                <div style={{ fontFamily: FONT_TITLE, fontWeight: 900, fontSize: 28, color: PALETTE.ink, letterSpacing: '0.1em', lineHeight: 0.95 }}>
                  SIGNED OFF
                </div>
                <div style={{ fontFamily: FONT_MONO, fontSize: 10, color: PALETTE.ink60, letterSpacing: '0.12em', marginTop: 4 }}>
                  2026.04.15 · R. LOPEZ
                </div>
              </div>
            </div>
          </>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { Scene6Report });