// VisiO Tech — Animated terminal cycling through 3 human-readable scenarios
const TERMINAL_SCENARIOS = [
  {
    id: 'invoice',
    type: 'comparison',
    title: 'faktury.pdf',
    command: '"Mám 200 faktur od klienta. Vytěž důležité položky."',
    manual: { label: 'Manuálně (fakturantka):', value: '3 min × faktura = 10 hodin práce', width: '100%' },
    ai:     { label: 'S naší automatizací:',    value: '5 sek × faktura · přes 95 % přesnost', width: '3%' },
    result: { label: 'Výsledek:', value: '200 faktur za 17 minut, ne 10 hodin' },
  },
  {
    id: 'email',
    type: 'email',
    title: 'email_triage',
    command: '"Přišel e-mail. Co s ním?"',
    from: 'Finanční úřad pro Prahu',
    subject: 'Upomínka — nedoplatek daně z příjmů',
    draft: 'Dobrý den, omlouvám se za opomenutí. Částku ihned uhradím a obratem pošlu potvrzení o platbě.',
    priority: 'HIGH',
    action: '✓ Schválit a odeslat',
  },
  {
    id: 'cuts',
    type: 'comparison',
    title: 'plán řezů',
    command: '"6m prkno → 10× 5cm + 20× 15cm. Kde řezat?"',
    manual: { label: 'Manuálně:', value: '1 hodina · 30 cm zbytek', width: '100%' },
    ai:     { label: 'S naší automatizací:', value: '30 sek · 5 cm zbytek',    width: '5%' },
    result: { label: 'Úspora:',   value: '83 % zbytků · 25× rychleji' },
  },
  {
    id: 'quality',
    type: 'comparison',
    title: 'kontrola_kvality',
    command: '"Zkontrolovat 500 výrobků na vady z fotek."',
    manual: { label: 'Manuálně:', value: '3 hodiny · 87 % záchyt vad', width: '100%' },
    ai:     { label: 'S naší automatizací:', value: '4 minuty · přes 95 % záchyt vad', width: '2%' },
    result: { label: 'Kontrola:', value: '100 % kusů, bez únavy' },
  },
  {
    id: 'counting',
    type: 'comparison',
    title: 'object_counter',
    command: '"Spočítej vozidla na parkovišti z fotky kamery."',
    manual: { label: 'Manuálně:', value: 'obsluha kontroluje každou hodinu', width: '100%' },
    ai:     { label: 'S naší automatizací:', value: 'auto 24/7 · přes 98 % spolehlivost', width: '4%' },
    result: { label: 'Výstup:', value: 'graf obsazenosti + notifikace na plno' },
  },
  {
    id: 'face',
    type: 'comparison',
    title: 'face_recognition',
    command: '"Rozpoznej zaměstnance při vstupu do firmy."',
    manual: { label: 'Dnes typicky:', value: 'recepční + karty/PIN', width: '100%' },
    ai:     { label: 'S naší automatizací:', value: 'auto rozpoznání · bez karet/PIN', width: '3%' },
    result: { label: 'Data:', value: 'u vás ve firmě nebo u nás v ČR — jak budete chtít' },
  },
  {
    id: 'photogrammetry',
    type: 'comparison',
    title: '2d_to_3d',
    command: '"Z fotek dronem chceme 3D model budovy nebo pozemku."',
    manual: { label: 'Bez nás:', value: 'drahý CAD SW + zaškolený technik', width: '100%' },
    ai:     { label: 'S námi:',  value: 'pošlete fotky, hotový 3D model za pár hodin', width: '15%' },
    result: { label: 'Využití:', value: 'kontrola stavby, výpočet objemu, vizualizace klientovi' },
  },
  {
    id: 'agent',
    type: 'comparison',
    title: 'whatsapp_agent',
    command: '"Klient napsal na WhatsApp. Vyřiď objednávku."',
    manual: { label: 'Manuálně:', value: 'kolega odpoví do 2 hodin', width: '100%' },
    ai:     { label: 'S naší automatizací:', value: 'AI odpoví za 4 sek · 24/7', width: '2%' },
    result: { label: 'Výsledek:', value: 'objednávka rovnou v systému, bez čekání' },
  },
];

const TERMINAL_INTERVAL_MS = 6000;
const TYPEWRITER_MS_PER_CHAR = 25;

function TerminalVisual() {
  const [index, setIndex] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const [draftTyped, setDraftTyped] = React.useState('');

  // Auto-cycle scenarios (respects pause + reduced-motion)
  React.useEffect(() => {
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce || paused) return;
    const id = setInterval(() => {
      setIndex((i) => (i + 1) % TERMINAL_SCENARIOS.length);
    }, TERMINAL_INTERVAL_MS);
    return () => clearInterval(id);
  }, [paused]);

  // Typewriter effect — only for the email draft, resets on scenario change
  React.useEffect(() => {
    const s = TERMINAL_SCENARIOS[index];
    if (s.type !== 'email') { setDraftTyped(''); return; }

    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setDraftTyped(s.draft); return; }

    setDraftTyped('');
    let i = 0;
    const id = setInterval(() => {
      i++;
      setDraftTyped(s.draft.slice(0, i));
      if (i >= s.draft.length) clearInterval(id);
    }, TYPEWRITER_MS_PER_CHAR);
    return () => clearInterval(id);
  }, [index]);

  const s = TERMINAL_SCENARIOS[index];

  return (
    <div
      className="terminal-visual"
      aria-hidden="true"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div className="terminal-header">
        <span className="terminal-dot terminal-dot--red"></span>
        <span className="terminal-dot terminal-dot--yellow"></span>
        <span className="terminal-dot terminal-dot--green"></span>
        <span className="terminal-title">{s.title}</span>
      </div>

      <div className="terminal-body" key={s.id}>
        <div className="terminal-line">
          <span className="terminal-prompt">$</span>
          <span className="terminal-text">{s.command}</span>
        </div>

        {s.type === 'comparison' && (
          <React.Fragment>
            <div className="terminal-row">
              <span className="terminal-label">{s.manual.label}</span>
              <span className="terminal-value">{s.manual.value}</span>
            </div>
            <div className="terminal-bar terminal-bar--manual">
              <div className="terminal-bar-fill" style={{ width: s.manual.width }}></div>
            </div>

            <div className="terminal-row">
              <span className="terminal-label">{s.ai.label}</span>
              <span className="terminal-value terminal-value--accent">{s.ai.value}</span>
            </div>
            <div className="terminal-bar">
              <div className="terminal-bar-fill" style={{ width: s.ai.width }}></div>
            </div>

            <div className="terminal-row terminal-row--result">
              <span className="terminal-label">{s.result.label}</span>
              <span className="terminal-value terminal-value--accent">{s.result.value}</span>
            </div>
          </React.Fragment>
        )}

        {s.type === 'email' && (
          <React.Fragment>
            <div className="terminal-mail">
              <div className="terminal-row">
                <span className="terminal-label">Od:</span>
                <span className="terminal-value">{s.from}</span>
              </div>
              <div className="terminal-row">
                <span className="terminal-label">Předmět:</span>
                <span className="terminal-value">{s.subject}</span>
              </div>
            </div>

            <div className="terminal-draft-label">AI píše koncept odpovědi…</div>
            <div className="terminal-draft">
              {draftTyped}
              <span className="terminal-typecursor">▋</span>
            </div>

            <div className="terminal-row terminal-row--result">
              <span className="terminal-label">Akce:</span>
              <span className="terminal-value terminal-value--accent">{s.priority} · {s.action}</span>
            </div>
          </React.Fragment>
        )}
      </div>

      <div className="terminal-pager">
        {TERMINAL_SCENARIOS.map((scenario, i) => (
          <button
            key={scenario.id}
            type="button"
            className={`terminal-pager-dot ${i === index ? 'terminal-pager-dot--active' : ''}`}
            onClick={() => setIndex(i)}
            aria-label={`Scénář ${i + 1}: ${scenario.title}`}
          ></button>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { TerminalVisual, TERMINAL_SCENARIOS });