const { Icon: AIcon } = window;

function AgentPanel({ onClose }) {
  const { AGENT_TASKS } = window.DATA;
  const [streamText, setStreamText] = React.useState('');
  const target = AGENT_TASKS.find(t => t.stream)?.output || '';

  React.useEffect(() => {
    if (!target) return;
    let i = 0;
    setStreamText('');
    const id = setInterval(() => {
      i += 2;
      setStreamText(target.slice(0, i));
      if (i >= target.length) clearInterval(id);
    }, 30);
    return () => clearInterval(id);
  }, [target]);

  return (
    <aside className="agent-overlay">
      <header className="agent-head">
        <div className="agent-orb" />
        <div>
          <div className="agent-title">Relay <em>Agent</em></div>
          <div className="agent-subtitle">working · 5 steps · 2 done</div>
        </div>
        <button className="icon-btn close" onClick={onClose}><AIcon name="close" /></button>
      </header>

      <div className="agent-body scroll">
        <div className="agent-prompt">
          帮我处理 Anna 那封 Q2 路线图的邮件 — 我同意把 Dashboard v2 推到 Q3，
          帮我起草回复、接受她周五 4 点的 review，并转发给 Mira。
        </div>

        {AGENT_TASKS.map(t => (
          <div key={t.id} className={`task-step ${t.state}`}>
            <div className="task-step-marker" />
            <div className="task-step-content">
              <div className="task-step-title">{t.title}</div>
              {t.meta && (
                <div className="task-step-meta">
                  {t.meta.map((m, i) => (
                    <span key={i}>{m.label}{m.value ? <b> {m.value}</b> : ''}</span>
                  ))}
                </div>
              )}
              {t.output && (
                <div className={`task-output ${t.stream ? 'stream' : ''}`}>
                  {t.stream ? streamText : t.output}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

      <footer className="agent-foot">
        <input className="agent-input" placeholder="继续指示 Agent…" />
        <button className="agent-send"><AIcon name="arrowUp" size={14} /></button>
      </footer>
    </aside>
  );
}

window.AgentPanel = AgentPanel;