// Demo data + the live "voice card" component used in the hero.

const AGENTS = [
  {
    id: 'nova',
    initials: 'NV',
    name: 'Nova',
    role: 'Local · llama-3.1',
    voice: 'Crisp Female · EU',
    color: '#D4FF3A',
    line: "I just finished the migration script — 142 rows touched, zero conflicts. Want me to run the test suite?",
  },
  {
    id: 'kit',
    initials: 'KT',
    name: 'Kit',
    role: 'Remote · openclaw-mini',
    voice: 'Warm Male · US',
    color: '#FF5436',
    line: "Calendar's clear after 3pm Thursday. Should I draft the email to the team or just block the slot?",
  },
  {
    id: 'oslo',
    initials: 'OS',
    name: 'Oslo',
    role: 'Local · qwen-coder',
    voice: 'Synth · Genderless',
    color: '#9DC8FF',
    line: "Three new pull requests since yesterday — one's failing CI on the auth tests. Walk you through it?",
  },
  {
    id: 'mira',
    initials: 'MR',
    name: 'Mira',
    role: 'Remote · openclaw-pro',
    voice: 'Soft Female · UK',
    color: '#E0BBFF',
    line: "Pulled the metrics from last week. Conversion's up 4.2% on the new flow — want the breakdown?",
  },
];

function Waveform({ active = true, bars = 38, intensity = 1 }) {
  const ref = React.useRef(null);
  const seed = React.useRef(Array.from({ length: bars }, () => Math.random() * 999));
  React.useEffect(() => {
    if (!ref.current) return undefined;
    let raf;
    const tick = (t) => {
      const els = ref.current?.children;
      if (els) {
        for (let i = 0; i < els.length; i++) {
          const phase = seed.current[i];
          const v = active
            ? (Math.sin(t / 240 + phase) * 0.5 + 0.5) *
              (Math.sin(t / 90 + phase * 2) * 0.4 + 0.6) *
              intensity
            : 0.06;
          els[i].style.height = `${Math.max(6, v * 100)}%`;
          els[i].style.opacity = active ? 0.9 : 0.25;
        }
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active, intensity]);
  return (
    <div className="waveform" ref={ref}>
      {Array.from({ length: bars }).map((_, i) => (
        <div className="bar" key={i} />
      ))}
    </div>
  );
}

function VoiceCard() {
  const [active, setActive] = React.useState(0);
  const [typed, setTyped] = React.useState('');
  const agent = AGENTS[active];

  // Cycle agents every 6s on auto unless user clicks
  const userTouched = React.useRef(false);
  React.useEffect(() => {
    if (userTouched.current) return undefined;
    const id = setInterval(() => {
      setActive((a) => (a + 1) % AGENTS.length);
    }, 6500);
    return () => clearInterval(id);
  }, [active]);

  // Typewriter effect for the spoken line
  React.useEffect(() => {
    setTyped('');
    let i = 0;
    const id = setInterval(() => {
      i++;
      setTyped(agent.line.slice(0, i));
      if (i >= agent.line.length) clearInterval(id);
    }, 22);
    return () => clearInterval(id);
  }, [agent.line]);

  const pick = (i) => {
    userTouched.current = true;
    setActive(i);
  };

  return (
    <div className="voice-card">
      <div className="vc-head">
        <span>// live · agent stream</span>
        <span className="stat">streaming</span>
      </div>
      <div className="agent-row">
        {AGENTS.map((a, i) => (
          <button
            key={a.id}
            className="agent-tab"
            data-on={i === active ? '1' : '0'}
            onClick={() => pick(i)}
          >
            <span className="av" style={{ background: a.color }}>{a.initials}</span>
            <span>{a.name}</span>
          </button>
        ))}
      </div>
      <div className="agent-stage">
        <div className="bg-grid" />
        <div className="as-head">
          <div className="as-av" style={{ background: agent.color }}>{agent.initials}</div>
          <div>
            <div className="as-name">{agent.name}</div>
            <div className="as-role">{agent.role} · {agent.voice}</div>
          </div>
        </div>
        <div className="as-line">
          {typed}
          <span className="cursor" />
        </div>
        <Waveform active intensity={1} />
        <div className="as-actions">
          <span>tap-to-talk · half-duplex off</span>
          <span className="keys">
            <span className="key">⌥</span>
            <span className="key">space</span>
          </span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AGENTS, Waveform, VoiceCard });