// Scene: Sales rep activity tracking + objectives (after phone)

function SceneRepActivity() {
  const { localTime } = useSprite();
  const t = localTime;
  const dur = 12;
  const exitOp = t > dur - 0.8 ? 1 - (t - (dur - 0.8)) / 0.8 : 1;

  const reps = [
    { name: 'Thomas M.', calls: 47, target: 50, dur: '4h12', conv: '18%', at: 0.6 },
    { name: 'Sofia B.',  calls: 62, target: 50, dur: '5h08', conv: '24%', at: 0.9 },
    { name: 'Hugo C.',   calls: 31, target: 50, dur: '2h54', conv: '11%', at: 1.2 },
    { name: 'Léa V.',    calls: 54, target: 50, dur: '4h47', conv: '21%', at: 1.5 },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
      <StepBadge num={5} label="Suivi commerciaux" />

      {/* Left: rep table */}
      <div style={{
        position: 'absolute', left: 80, top: 240, width: 980,
        opacity: clamp(t/0.4, 0, 1),
      }}>
        <div style={{
          fontFamily: D1.mono, fontSize: 13, color: D1.textMuted,
          letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 18,
        }}>Activité de l'équipe · aujourd'hui</div>

        {/* Header */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1.6fr 0.9fr 0.7fr',
          gap: 14, padding: '0 18px 12px',
          fontFamily: D1.mono, fontSize: 11, color: D1.textDim,
          letterSpacing: '0.15em', textTransform: 'uppercase',
          borderBottom: `1px solid ${D1.border}`,
        }}>
          <div>Commercial</div>
          <div>Appels / objectif</div>
          <div>Durée</div>
          <div>Conv.</div>
        </div>

        {reps.map((r, i) => {
          const op = clamp((t - r.at) / 0.5, 0, 1);
          const pct = Math.min(1, r.calls / r.target);
          const ok = r.calls >= r.target;
          const barW = clamp((t - r.at - 0.3) / 1.2, 0, 1) * pct;
          return (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '1.4fr 1.6fr 0.9fr 0.7fr',
              gap: 14, padding: '14px 18px',
              alignItems: 'center',
              background: i % 2 === 0 ? 'rgba(91,141,255,0.04)' : 'transparent',
              borderRadius: 8,
              opacity: op,
              transform: `translateX(${(1-op) * -20}px)`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 34, height: 34, borderRadius: '50%',
                  background: D1.gradPrimary,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'white', fontWeight: 700, fontSize: 12, fontFamily: D1.font,
                }}>{r.name.split(' ').map(s=>s[0]).join('')}</div>
                <div style={{ color: D1.text, fontSize: 14, fontFamily: D1.font, fontWeight: 600 }}>
                  {r.name}
                </div>
              </div>
              <div>
                <div style={{
                  height: 8, background: 'rgba(91,141,255,0.12)',
                  borderRadius: 4, position: 'relative', overflow: 'hidden',
                }}>
                  <div style={{
                    position: 'absolute', left: 0, top: 0, bottom: 0,
                    width: `${barW * 100}%`,
                    background: ok ? `linear-gradient(90deg, ${D1.green}, #6ee896)` : D1.gradPrimary,
                    borderRadius: 4,
                    boxShadow: ok ? `0 0 12px ${D1.green}` : `0 0 12px ${D1.blue}`,
                  }}/>
                  {/* Target marker */}
                  <div style={{
                    position: 'absolute',
                    left: `${(r.target / 70) * 100}%`,
                    top: -2, bottom: -2,
                    width: 2, background: D1.violet,
                  }}/>
                </div>
                <div style={{
                  fontFamily: D1.mono, fontSize: 12, color: D1.text,
                  marginTop: 6, fontVariantNumeric: 'tabular-nums',
                }}>
                  <span style={{ color: ok ? D1.green : D1.text, fontWeight: 700 }}>{r.calls}</span>
                  <span style={{ color: D1.textDim }}> / {r.target}</span>
                  {ok && <span style={{ marginLeft: 8, color: D1.green }}>✓</span>}
                </div>
              </div>
              <div style={{
                fontFamily: D1.mono, fontSize: 14, color: D1.text,
                fontVariantNumeric: 'tabular-nums',
              }}>{r.dur}</div>
              <div style={{
                fontFamily: D1.mono, fontSize: 14,
                color: parseInt(r.conv) > 18 ? D1.green : D1.text,
                fontWeight: 700,
              }}>{r.conv}</div>
            </div>
          );
        })}

        {/* Team total */}
        <div style={{
          marginTop: 22, padding: '16px 18px',
          background: D1.bgPanelSolid,
          border: `1px solid ${D1.borderBright}`,
          borderRadius: 10,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          opacity: clamp((t - 2.4) / 0.5, 0, 1),
          boxShadow: D1.shadowGlow,
        }}>
          <div>
            <div style={{
              fontFamily: D1.mono, fontSize: 11, color: D1.textMuted,
              letterSpacing: '0.18em', textTransform: 'uppercase',
            }}>Objectif équipe</div>
            <div style={{
              color: D1.text, fontSize: 22, fontWeight: 700, fontFamily: D1.font,
              marginTop: 4, fontVariantNumeric: 'tabular-nums',
            }}>
              {Math.floor(interpolate([2.4, 4], [0, 194], Easing.easeOutCubic)(t))} / 200 appels
            </div>
          </div>
          <div style={{
            fontFamily: D1.font, fontWeight: 800, fontSize: 36,
            color: D1.green, fontVariantNumeric: 'tabular-nums',
          }}>
            {Math.floor(interpolate([2.4, 4], [0, 97], Easing.easeOutCubic)(t))}%
          </div>
        </div>
      </div>

      {/* Right: audio recording card */}
      {t > 4.2 && (
        <div style={{
          position: 'absolute', right: 80, top: 240, width: 700,
          opacity: clamp((t-4.2)/0.5, 0, 1),
          transform: `translateY(${(1-clamp((t-4.2)/0.5, 0, 1)) * 20}px)`,
        }}>
          <div style={{
            fontFamily: D1.mono, fontSize: 13, color: D1.violet,
            letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 18,
          }}>Enregistrements · ré-écoute</div>

          {[
            { who: 'Sofia B. → M. Laurent', dur: '04:12', tag: 'RDV pris', tagColor: D1.green, at: 4.4 },
            { who: 'Thomas M. → J. Marx',  dur: '02:38', tag: 'À rappeler', tagColor: D1.amber, at: 5.0 },
            { who: 'Léa V. → C. Petit',    dur: '06:51', tag: 'Pas intéressé', tagColor: D1.textDim, at: 5.6 },
          ].map((rec, i) => {
            const op = clamp((t - rec.at) / 0.5, 0, 1);
            const isPlaying = i === 0 && t > 6.5 && t < 10;
            return (
              <div key={i} style={{
                padding: 18, marginBottom: 12,
                background: D1.bgPanelSolid,
                border: isPlaying ? `1.5px solid ${D1.violet}` : `1px solid ${D1.border}`,
                borderRadius: 10,
                opacity: op,
                transform: `translateX(${(1-op)*30}px)`,
                boxShadow: isPlaying ? `0 0 28px color-mix(in oklab, ${D1.violet} 35%, transparent)` : 'none',
              }}>
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  marginBottom: 12,
                }}>
                  <div style={{ color: D1.text, fontSize: 14, fontWeight: 600, fontFamily: D1.font }}>
                    {rec.who}
                  </div>
                  <div style={{
                    fontFamily: D1.mono, fontSize: 10,
                    color: rec.tagColor,
                    padding: '4px 10px',
                    background: `color-mix(in oklab, ${rec.tagColor} 15%, transparent)`,
                    border: `1px solid ${rec.tagColor}`,
                    borderRadius: 4,
                    letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700,
                  }}>{rec.tag}</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: '50%',
                    background: isPlaying ? D1.violet : 'rgba(160,112,255,0.2)',
                    border: `1.5px solid ${D1.violet}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>
                    {isPlaying ? (
                      <svg width="10" height="12" viewBox="0 0 10 12" fill="none">
                        <rect x="1" y="1" width="2.5" height="10" fill="white"/>
                        <rect x="6.5" y="1" width="2.5" height="10" fill="white"/>
                      </svg>
                    ) : (
                      <svg width="10" height="12" viewBox="0 0 10 12" fill="none">
                        <path d="M2 1l7 5-7 5V1z" fill={D1.violet}/>
                      </svg>
                    )}
                  </div>
                  {/* Mini waveform */}
                  <div style={{
                    flex: 1, display: 'flex', alignItems: 'center', gap: 2, height: 28,
                  }}>
                    {Array.from({ length: 50 }).map((_, j) => {
                      const baseH = 4 + Math.abs(Math.sin(j * 0.6 + i * 2)) * 18;
                      const playProg = isPlaying ? clamp((t - 6.5) / 3.2, 0, 1) : 0;
                      const passed = j / 50 < playProg;
                      return (
                        <div key={j} style={{
                          width: 3,
                          height: baseH + (isPlaying && passed ? Math.sin(t*8 + j) * 4 : 0),
                          background: passed ? D1.violet : 'rgba(160,112,255,0.3)',
                          borderRadius: 1.5,
                        }}/>
                      );
                    })}
                  </div>
                  <div style={{
                    fontFamily: D1.mono, fontSize: 12, color: D1.textMuted,
                    fontVariantNumeric: 'tabular-nums',
                  }}>{rec.dur}</div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      <SceneTitle kicker="Étape 05 · Suivi commerciaux" title="Volumétrie, objectifs et ré-écoute des appels" />
    </div>
  );
}

Object.assign(window, { SceneRepActivity });