#智能体名册

import { useState } from 'react';
import {
  AgentAvatar,
  AvatarStack,
  AvatarStatusDot,
  MarkStageProvider,
  UnreadBadge,
  WorkingBadge,
  useMarkCommand,
  useMarkCommands,
} from '@aora-bot/react';

const agents = [
  { id: 'nova', name: 'Nova' },
  { id: 'atlas', name: 'Atlas' },
  { id: 'iris', name: 'Iris' },
];

function Row({ agent }: { agent: (typeof agents)[number] }) {
  const commands = useMarkCommands();
  const snapshot = useMarkCommand(agent.id, 'avatar');
  const [unread, setUnread] = useState(0);
  const running = snapshot.facts?.running === true;

  return (
    <div className="site-demo__row">
      <span className="site-demo__avatar">
        <AgentAvatar agent={agent} state={snapshot.state} sizePx={40} />
        <span className="site-demo__dot">
          <AvatarStatusDot tone={running ? 'working' : 'online'} label={running ? '工作中' : '在线'} />
        </span>
        <span className="site-demo__count">
          <UnreadBadge count={unread} />
        </span>
      </span>
      <span className="site-demo__who">{agent.name}</span>
      {running && <WorkingBadge />}
      <span className="site-controls">
        <button
          className="site-btn"
          onClick={() =>
            running
              ? commands.releaseFacts(agent.id)
              : commands.holdFacts(agent.id, { running: true, activity: 'coding' })
          }
        >
          {running ? '停止' : '开始'}
        </button>
        <button
          className="site-btn"
          onClick={() => {
            setUnread((n) => n + 1);
            commands.holdState(agent.id, 'notifying', { ttlMs: 1400 });
          }}
        >
          来消息
        </button>
        <button
          className="site-btn"
          onClick={() => {
            commands.releaseFacts(agent.id);
            commands.holdState(agent.id, 'celebrate', { ttlMs: 1600 });
          }}
        >
          完成
        </button>
      </span>
    </div>
  );
}

export default function Demo() {
  return (
    <MarkStageProvider>
      <div className="site-demo site-demo--column">
        {agents.map((agent) => (
          <Row key={agent.id} agent={agent} />
        ))}
        <div className="site-demo__row">
          <AvatarStack members={[...agents, { id: 'echo' }, { id: 'sol' }]} sizePx={40} />
          <span>全体</span>
        </div>
      </div>
    </MarkStageProvider>
  );
}