// Animated STT → LLM → TTS pipeline visualization

function PipelineDiagram() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 50);
    return () => clearInterval(id);
  }, []);

  // 4 stages, packets animate left to right across them.
  const stages = [
    { id: "input", label: "AUDIO IN", sub: "telephony · webrtc", x: 40 },
    { id: "stt",   label: "STT",      sub: "Whisper · streaming", x: 280 },
    { id: "llm",   label: "LLM AGENT", sub: "intent · tools · RAG", x: 540 },
    { id: "tts",   label: "TTS",      sub: "ElevenLabs · multilingual", x: 800 },
    { id: "output",label: "AUDIO OUT", sub: "back to caller", x: 1040 },
  ];

  // Connecting positions in % of width 1180
  const W = 1180;
  const H = 280;

  // Generate "packet" particles at staggered phases
  const packets = Array.from({ length: 8 }, (_, i) => {
    const phase = (tick / 80 + i / 8) % 1;
    const x = 60 + phase * (W - 120);
    return { x, phase, key: i };
  });

  // Generate STT input waveform (live-ish)
  const wavePts = Array.from({ length: 40 }, (_, i) => {
    const v = Math.sin((tick * 0.08) + i * 0.6) * Math.sin(tick * 0.05 + i * 0.2);
    return 18 + v * 12;
  });

  // Output TTS wave (slightly different phase)
  const outPts = Array.from({ length: 40 }, (_, i) => {
    const v = Math.sin((tick * 0.07) + i * 0.5 + 1.2) * Math.cos(tick * 0.04 + i * 0.3);
    return 18 + v * 12;
  });

  const stageColor = "oklch(0.30 0.010 240)";
  const accent = "oklch(0.82 0.060 200)";
  const dim = "oklch(0.55 0.010 240)";

  return (
    <div className="pipeline-wrap reveal">
      <div className="p-label">
        <span className="live"></span>
        <span>live trace · session 0x4f.a921 · latency 318 ms · multilingual</span>
      </div>

      <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
        {/* Connecting line */}
        <line x1="60" y1="140" x2={W - 60} y2="140" stroke={stageColor} strokeWidth="1" strokeDasharray="2 4" />

        {/* Animated packets along the wire */}
        {packets.map(p => (
          <circle key={p.key} cx={p.x} cy="140" r="3" fill={accent} opacity={0.85}>
            <animate attributeName="r" values="2;4;2" dur="1.2s" repeatCount="indefinite" />
          </circle>
        ))}

        {/* Audio in waveform */}
        <g transform="translate(40, 110)">
          {wavePts.map((h, i) => (
            <rect key={i} x={i * 4} y={30 - h / 2} width="2" height={h} fill={accent} opacity="0.7" rx="1" />
          ))}
        </g>

        {/* STT box */}
        <g transform="translate(280, 90)">
          <rect width="200" height="100" rx="2" fill="none" stroke={stageColor} />
          <text x="14" y="28" fill={dim} fontFamily="JetBrains Mono" fontSize="10" letterSpacing="2">STT</text>
          <text x="14" y="56" fill="oklch(0.96 0 0)" fontFamily="JetBrains Mono" fontSize="13">
            {`> "Bghit chambre ${".".repeat((tick / 4 | 0) % 4)}"`}
          </text>
          <text x="14" y="78" fill={dim} fontFamily="JetBrains Mono" fontSize="10">lang: ar-MA · conf 0.94</text>
        </g>

        {/* LLM agent box */}
        <g transform="translate(540, 90)">
          <rect width="240" height="100" rx="2" fill="none" stroke={stageColor} />
          <text x="14" y="28" fill={dim} fontFamily="JetBrains Mono" fontSize="10" letterSpacing="2">LLM AGENT</text>
          <text x="14" y="56" fill="oklch(0.96 0 0)" fontFamily="JetBrains Mono" fontSize="13">
            intent: book_room
          </text>
          <text x="14" y="78" fill={accent} fontFamily="JetBrains Mono" fontSize="11">
            tool_call: check_availability()
          </text>
        </g>

        {/* TTS box */}
        <g transform="translate(800, 90)">
          <rect width="200" height="100" rx="2" fill="none" stroke={stageColor} />
          <text x="14" y="28" fill={dim} fontFamily="JetBrains Mono" fontSize="10" letterSpacing="2">TTS</text>
          <text x="14" y="56" fill="oklch(0.96 0 0)" fontFamily="JetBrains Mono" fontSize="13">"un instant…"</text>
          <text x="14" y="78" fill={dim} fontFamily="JetBrains Mono" fontSize="10">voice: fr-FR · 11labs</text>
        </g>

        {/* Audio out waveform */}
        <g transform="translate(1040, 110)">
          {outPts.map((h, i) => (
            <rect key={i} x={i * 4} y={30 - h / 2} width="2" height={h} fill={accent} opacity="0.7" rx="1" />
          ))}
        </g>

        {/* Stage labels under each */}
        <g fontFamily="JetBrains Mono" fontSize="10" fill={dim} letterSpacing="2" textAnchor="middle">
          <text x="120" y="225">AUDIO IN</text>
          <text x="380" y="225">SPEECH-TO-TEXT</text>
          <text x="660" y="225">REASONING + TOOLS</text>
          <text x="900" y="225">TEXT-TO-SPEECH</text>
          <text x="1120" y="225">AUDIO OUT</text>
        </g>
        <g fontFamily="JetBrains Mono" fontSize="9" fill={dim} textAnchor="middle">
          <text x="120" y="244">caller · ar-MA</text>
          <text x="380" y="244">whisper · streaming</text>
          <text x="660" y="244">intent · rag · tools</text>
          <text x="900" y="244">elevenlabs</text>
          <text x="1120" y="244">caller · fr-FR</text>
        </g>
      </svg>
    </div>
  );
}

window.PipelineDiagram = PipelineDiagram;