/* global React */
const { useEffect, useRef, useState } = React;

function AgentIcon({ kind }) {
  const common = { width: 18, height: 18, fill: 'none', stroke: '#4A7AFF', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'pm': return (<svg viewBox="0 0 24 24" {...common}><path d="M12 2 2 7l10 5 10-5-10-5Z"/><path d="M2 12l10 5 10-5M2 17l10 5 10-5"/></svg>);
    case 'req': return (<svg viewBox="0 0 24 24" {...common}><path d="M5 4h11l4 4v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z"/><path d="M16 4v4h4"/><path d="M8 13h8M8 17h5"/></svg>);
    case 'arch': return (<svg viewBox="0 0 24 24" {...common}><path d="M12 2 3 7v10l9 5 9-5V7l-9-5Z"/><path d="M3 7l9 5 9-5M12 12v10"/></svg>);
    case 'sm': return (<svg viewBox="0 0 24 24" {...common}><rect x="3" y="4" width="18" height="4" rx="1"/><rect x="3" y="11" width="18" height="4" rx="1"/><rect x="3" y="18" width="12" height="3" rx="1"/></svg>);
    case 'dev': return (<svg viewBox="0 0 24 24" {...common}><path d="m8 7-5 5 5 5M16 7l5 5-5 5M14 4l-4 16"/></svg>);
    case 'qa': return (<svg viewBox="0 0 24 24" {...common}><path d="M9 12l2 2 4-4"/><path d="M12 3 4 7v5c0 5 3.5 8 8 9 4.5-1 8-4 8-9V7l-8-4Z"/></svg>);
    default: return null;
  }
}

function Agents({ showTerminal = true }) {
  const { t } = window.useT();
  const a = t.agents;
  return (
    <section id="agents" className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>{a.eyebrow}</span>
          <h2>{a.h2line1}<br />{a.h2line2}</h2>
          <p className="lead">{a.lead}</p>
        </div>

        <div className="agents-grid">
          {a.cards.map(card => (
            <div className="card card-hover agent-card" key={card.id}>
              <div className="top">
                <div className="ico-wrap"><AgentIcon kind={card.id} /></div>
                <span className="badge">{card.tag}</span>
              </div>
              <h3>{card.name}</h3>
              <p>{card.body}</p>
              <div className="stream">
                <span className="live-dot"></span>
                <span>{a.streamMeta}</span>
              </div>
            </div>
          ))}
        </div>

        {showTerminal && (
          <div style={{ marginTop: 32 }}>
            <LiveTerminal />
          </div>
        )}
      </div>
    </section>
  );
}

function LiveTerminal() {
  const { t, lang } = window.useT();
  const a = t.agents;
  const [shown, setShown] = useState(1);
  useEffect(() => {
    setShown(1);
    const id = setInterval(() => setShown(s => Math.min(s + 1, a.lines.length)), 800);
    return () => clearInterval(id);
  }, [lang, a.lines.length]);

  return (
    <div className="terminal">
      <div className="terminal-head">
        <span className="dot" style={{ background: '#FF5F56' }}></span>
        <span className="dot" style={{ background: '#FFBD2E' }}></span>
        <span className="dot" style={{ background: '#27C93F' }}></span>
        <span className="title">{a.terminalTitle}</span>
      </div>
      <div className="terminal-body">
        {a.lines.slice(0, shown).map((l, i) => (
          <div className="term-line" key={i}>
            <span className="meta">[{String(i + 1).padStart(2, '0')}:{String(((i*7)%60)).padStart(2, '0')}]</span>
            <span className="agent-tag">{l.tag}</span>
            <span className="arrow">→</span>
            <span className={l.kind}>{l.text}</span>
          </div>
        ))}
        {shown < a.lines.length && <span className="cursor"></span>}
      </div>
    </div>
  );
}

window.Agents = Agents;