// scenes/Scene3_AI.jsx
// 9.0 → 13.5s — The dashboard view. An AI ring scans each row, badges flip from
// "À vérifier" → "Vérifié" one after another, integration logos orbit in.

function Scene3_AI({ start = 9.0, end = 13.5 }) {
  return (
    <Sprite start={start} end={end}>
      <SceneBg color={FP.bg}>
        <SubtleGrain />

        <Sprite start={start} end={end}>
          <Dashboard stageStart={start} />
        </Sprite>

        <Sprite start={start + 0.2} end={end - 0.3}>
          <Caption text="L'IA vérifie la conformité." accent="Instantanément." />
        </Sprite>

        <Sprite start={end - 0.5} end={end}>
          <FadeOutBlack />
        </Sprite>
      </SceneBg>
    </Sprite>
  );
}

function Dashboard({ stageStart }) {
  const t = useTime() - stageStart;
  const sec = getSector();
  const rows = sec.rows.map((r, i) => ({ ...r, verifyAt: 1.4 + i * 0.3 }));

  const appear = Easing.easeOutCubic(clamp(t / 0.5, 0, 1));

  return (
    <div style={{
      position: 'absolute',
      left: 140, top: 110,
      width: 1640, height: 860,
      background: FP.card,
      border: `1px solid ${FP.border}`,
      borderRadius: 18,
      boxShadow: '0 30px 80px rgba(0,0,0,0.5)',
      opacity: appear,
      transform: `scale(${0.96 + appear * 0.04})`,
      transformOrigin: 'center',
      padding: 40,
      fontFamily: SANS,
      overflow: 'hidden',
    }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 28 }}>
        <div>
          <div style={{ fontSize: 13, color: FP.muted, marginBottom: 6 }}>Tableau de bord</div>
          <div style={{ fontSize: 34, color: FP.text, fontWeight: 600, letterSpacing: '-0.02em' }}>Collectes</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Badge variant="primary" icon={<SparkleIcon size={12} color={FP.primary}/>}>IA active</Badge>
          <Badge variant="secondary">{rows.length} en cours</Badge>
        </div>
      </div>

      {/* Table */}
      <div style={{
        border: `1px solid ${FP.borderSoft}`,
        borderRadius: 12,
        overflow: 'hidden',
      }}>
        {/* thead */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1.4fr 1.2fr 0.8fr 1.2fr',
          padding: '14px 20px',
          background: 'rgba(255,255,255,0.03)',
          borderBottom: `1px solid ${FP.borderSoft}`,
          fontSize: 12,
          color: FP.muted,
          fontWeight: 500,
          textTransform: 'uppercase',
          letterSpacing: '0.04em',
        }}>
          <div>Client</div>
          <div>Modèle</div>
          <div>Documents</div>
          <div>IA</div>
          <div>Statut</div>
        </div>

        {rows.map((row, i) => {
          const rowAppear = clamp((t - (0.3 + i * 0.08)) / 0.25, 0, 1);
          const rowY = (1 - rowAppear) * 8;
          const verified = t > row.verifyAt + 0.35;
          const scanning = t > row.verifyAt - 0.15 && t < row.verifyAt + 0.35;
          return (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '2fr 1.4fr 1.2fr 0.8fr 1.2fr',
              alignItems: 'center',
              padding: '18px 20px',
              borderTop: i === 0 ? 'none' : `1px solid ${FP.borderSoft}`,
              opacity: rowAppear,
              transform: `translateY(${rowY}px)`,
              background: scanning ? FP.primaryDim : 'transparent',
              transition: 'background 200ms',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 34, height: 34, borderRadius: 999,
                  background: 'rgba(255,255,255,0.08)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 12, fontWeight: 500, color: FP.text,
                }}>
                  {row.client.split(' ').map(w=>w[0]).slice(0,2).join('')}
                </div>
                <span style={{ fontSize: 15, color: FP.text, fontWeight: 500 }}>{row.client}</span>
              </div>
              <div style={{ color: FP.muted, fontSize: 14 }}>{row.tpl}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontFamily: MONO, fontSize: 13, color: FP.text }}>{row.docs}</span>
                <div style={{
                  flex: 1, height: 5,
                  background: 'rgba(255,255,255,0.08)',
                  borderRadius: 999, overflow: 'hidden',
                }}>
                  <div style={{ width: '100%', height: '100%', background: FP.primary }} />
                </div>
              </div>
              <div>
                <AIScanIndicator active={scanning} done={verified} />
              </div>
              <div>
                {verified
                  ? <Badge variant="success" icon={<CheckIcon size={11} color={FP.success}/>}>Vérifié</Badge>
                  : <Badge variant="warn" icon={<DotIcon size={6} color={FP.warn}/>}>À vérifier</Badge>
                }
              </div>
            </div>
          );
        })}
      </div>

      {/* Integrations row */}
      <Sprite start={stageStart + 3.0} end={stageStart + 4.5}>
        <IntegrationsStrip />
      </Sprite>
    </div>
  );
}

function AIScanIndicator({ active, done }) {
  const t = useTime();
  const rot = (t * 360) % 360;
  if (done) {
    return (
      <div style={{
        width: 26, height: 26, borderRadius: 999,
        background: FP.primaryDim,
        border: `1.5px solid ${FP.primary}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: FP.primary,
      }}>
        <CheckIcon size={14} color={FP.primary}/>
      </div>
    );
  }
  if (active) {
    return (
      <div style={{
        width: 26, height: 26, borderRadius: 999,
        border: `2px solid ${FP.primary}`,
        borderTopColor: 'transparent',
        transform: `rotate(${rot}deg)`,
      }}/>
    );
  }
  return (
    <div style={{
      width: 26, height: 26, borderRadius: 999,
      border: `1.5px dashed ${FP.borderSoft}`,
    }}/>
  );
}

function IntegrationsStrip() {
  const { localTime } = useSprite();
  const p = Easing.easeOutCubic(clamp(localTime / 0.5, 0, 1));
  return (
    <div style={{
      position: 'absolute',
      left: 40, right: 40, bottom: 32,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 16,
      padding: '14px 20px',
      background: 'rgba(255,255,255,0.04)',
      border: `1px solid ${FP.borderSoft}`,
      borderRadius: 12,
      opacity: p,
      transform: `translateY(${(1-p) * 16}px)`,
    }}>
      <div style={{ fontSize: 13, color: FP.muted, fontFamily: SANS }}>
        Exports automatiques vers
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        <IntegrationChip name="Google Drive" src="assets/google-drive.svg" />
        <IntegrationChip name="OneDrive"     src="assets/onedrive.svg" />
        <IntegrationChip name="Zapier"       src="assets/zapier.svg" />
      </div>
    </div>
  );
}

function IntegrationChip({ name, src }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: 34, height: 34,
        background: '#fff',
        borderRadius: 8,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 6,
      }}>
        <img src={src} alt={name} style={{ width: '100%', height: '100%', objectFit: 'contain' }}/>
      </div>
      <span style={{ fontSize: 14, color: FP.text, fontFamily: SANS, fontWeight: 500 }}>{name}</span>
    </div>
  );
}

function FadeOutBlack() {
  const { localTime, duration } = useSprite();
  const p = clamp(localTime / duration, 0, 1);
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: FP.bg,
      opacity: Easing.easeInCubic(p),
      pointerEvents: 'none',
    }}/>
  );
}

Object.assign(window, { Scene3_AI });