#CastStage

import { AgentAvatar, MarkStageProvider } from '@aora-bot/react';
import { AvatarSlot, CastStage, useCastScene, type CastStep } from '@aora-bot/surfaces';

const members = [
  { id: 'lead', shape: 'blob', color: 'blue', bobPx: 4 },
  { id: 'helper', shape: 'hex', color: 'green', bobPx: 3, bobMs: 2600 },
  { id: 'scout', shape: 'star', color: 'orange', sizePx: 56 },
] as const;

const steps: CastStep[] = [
  { id: 'enter', positions: { lead: { x: 0, y: -40, state: 'waking' } }, durationMs: 1400 },
  {
    id: 'meet',
    positions: { lead: { x: -60, y: 0 }, helper: { x: 60, y: 10, state: 'happy' } },
    durationMs: 1600,
  },
  {
    id: 'work',
    positions: {
      lead: { x: -80, y: -20, state: 'thinking' },
      helper: { x: 0, y: 30, state: 'working' },
      scout: { x: 80, y: -30, state: 'searching' },
    },
    durationMs: 2000,
  },
  { id: 'land', positions: { lead: { x: 110, y: 90, scale: 0.7, state: 'happy' } }, durationMs: 1800 },
];

export default function Demo() {
  const scene = useCastScene(steps, { autoplay: true, loop: true });
  const landed = scene.step?.id === 'land';
  return (
    <MarkStageProvider>
      <div className="site-demo site-demo--column">
        <CastStage members={members} steps={steps} stepIndex={scene.stepIndex} widthPx={320} heightPx={260}>
          <div style={{ position: 'absolute', right: 16, bottom: 16 }}>
            <AvatarSlot arrived={landed} sizePx={56} label="你的智能体">
              <AgentAvatar agent={{ id: 'lead', shape: 'blob', color: 'blue' }} sizePx={56} state="happy" />
            </AvatarSlot>
          </div>
        </CastStage>
        <div className="site-controls">
          <button className="site-btn" onClick={scene.prev}>
            ‹
          </button>
          <button className="site-btn" onClick={scene.playing ? scene.pause : scene.play}>
            {scene.playing ? '暂停' : '播放'}
          </button>
          <button className="site-btn" onClick={scene.next}>
            ›
          </button>
          <span className="site-demo__label">
            {scene.stepIndex + 1}/{steps.length}, {scene.step?.id}
          </span>
        </div>
      </div>
    </MarkStageProvider>
  );
}