import { useState, type ComponentProps } from 'react';
import { createRoot } from 'react-dom/client';
import { CodingChatBody } from '../../../src/pages/Chat/CodingChatBody';
import { CodingStartHeading } from '../../../src/pages/Chat/CodingStartHeading';
import { CodingComposer } from '../../../src/pages/Chat/CodingComposer';
import { TeacherCompanion } from '../../../src/pages/Chat/TeacherCompanion';
import { CommunityInvitation } from '../../../src/components/community/CommunityInvitation';
import '../../../src/styles/globals.css';
import '../../../src/pages/Chat/classroom-workspace.css';

export function Layout() {
  const [bubble, setBubble] = useState<HTMLDivElement | null>(null);
  const [draft, setDraft] = useState('');
  const [sent, setSent] = useState(false);
  const [dismissed, setDismissed] = useState<string[]>([]);
  const agents = ['架构工程师-陈宗琦', '产品工程师-Alice'].map((name, index) => ({
    teacher_id: String(index), version: 1, is_default: index === 0,
    definition: { config_id: String(index), name, avatar_id: 'avatar-06',
      description: index === 0 ? '有什么编程问题想一起讨论？' : '陪你把天马行空的点子，变成能玩、能用、眼睛一亮的小作品。' },
  }));
  const companion = {
    agents, selectedAgent: agents[0], definition: agents[0].definition, enabled: true,
    unreadAgentIds: [], invitation: null, welcome: null, loading: false, error: null, checking: false,
    refreshing: false, refreshStatus: 'idle', refresh: async () => {}, reloadCatalog: async () => {}, dismiss: () => {},
    welcomes: new URLSearchParams(location.search).has('teachers') ? agents.flatMap((agent, index) => dismissed.includes(agent.teacher_id)
      ? [] : [{ agentId: agent.teacher_id, definition: agent.definition, text: agent.definition.description, tone: index }]) : [],
    dismissWelcome: (id: string) => setDismissed(values => [...values, id]),
    dismissWelcomes: () => setDismissed(['0', '1']),
  } as ComponentProps<typeof TeacherCompanion>['companion'];
  return <div className="classroom-workspace flex h-screen flex-col bg-white">
    <header className="relative z-50 flex h-12 shrink-0 items-center justify-end border-b px-3" data-testid="coding-conversation-header">
      <span className="mr-auto min-w-0 truncate text-xs">测试项目 › 新对话</span>
      <TeacherCompanion companion={companion} open={false} onOpen={() => {}} onToggle={() => {}} bubbleRef={setBubble} />
    </header>
    <main className="classroom-main flex min-h-0 min-w-0 flex-1 flex-col">
      <div className="classroom-tabs" role="tablist"><button role="tab" aria-selected="true">操作对话</button><button role="tab">作品</button></div>
      <CodingChatBody welcome={!sent} hidden={false} bubble={bubble}>
        <div className="classroom-chat-view min-h-0 flex-1">{!sent ? <CodingStartHeading /> : <p>第一条消息已发送（测试）</p>}</div>
        <div className="classroom-composer-view shrink-0">
          <CodingComposer value={draft} editable canSend={Boolean(draft)} preparing={false} recovering={false}
            runStatus="idle" mode="prompt" queue={{ items: [] }} error={null} recoverableError={false}
            attachments={[]} submitting={false} placeholder="说说你的想法，接下来想做什么？" onChange={setDraft}
            onModeChange={() => {}} onSubmit={() => { setSent(true); setDraft(''); }} onRecover={() => {}}
            onAddFiles={() => {}} onRemoveAttachment={() => {}} />
        </div>
        {!sent && <CommunityInvitation />}
      </CodingChatBody>
    </main>
  </div>;
}
createRoot(document.getElementById('root')!).render(<Layout />);