// App shell migrated from A2A learning/apps/console/src/App.tsx.
import { useCallback, useEffect, useState } from 'react';
import { Button, Dropdown } from 'antd';
import { ChevronUp, LogOut, Moon, Sun, UserRound } from 'lucide-react';
import { SidebarNavigation } from './components/SidebarNavigation';
import { ManagedCampaignListPage } from './pages/LearningCampaignPages';
import { ProgressPage } from './pages/ProgressPage';
import { TaskDetailPage } from './pages/TaskDetailPage';
import { CandidatesPage } from './pages/CandidatesPage';
import { TestsPage } from './pages/TestsPage';
import type { AuthStatus } from './types';

function routePath() { return location.hash.slice(1) || '/tasks'; }
export function A2AWorkbench({ auth, onLogout, dark, onTheme }: { auth: AuthStatus; onLogout: () => void; dark: boolean; onTheme: () => void }) {
  const [path, setPath] = useState(routePath);
  useEffect(() => { const update = () => setPath(routePath()); window.addEventListener('hashchange', update); return () => window.removeEventListener('hashchange', update); }, []);
  const navigate = useCallback((next: string) => { location.hash = next; }, []);
  const category = path.split('/')[1] || 'tasks';
  const detailId = path.split('/')[2];
  const accountName = auth.user?.display_name || auth.user?.username || '维护者';
  let content = <ManagedCampaignListPage navigate={navigate} />;
  if (category === 'tasks' && detailId) content = <TaskDetailPage key={detailId} taskId={detailId} navigate={navigate} />;
  if (category === 'overview') content = <ProgressPage navigate={navigate} />;
  if (category === 'candidates') content = <CandidatesPage key={detailId || 'list'} selectedId={detailId} navigate={navigate} />;
  if (category === 'validations') content = <TestsPage navigate={navigate} />;
  return <div className="app-shell">
    <aside className="sidebar"><SidebarNavigation category={category} navigate={navigate} /><div className="sidebar-footer"><div className="sidebar-identity">
      <Dropdown menu={{ items: [{ key: 'logout', label: '退出登录', icon: <LogOut size={16} />, onClick: onLogout }] }} trigger={['click']} placement="topLeft"><button type="button" className="sidebar-account" aria-label={`当前账号：${accountName}`}><span className="sidebar-account-avatar"><UserRound size={18} aria-hidden="true" /></span><span className="sidebar-account-label"><span className="sidebar-account-name">{accountName}</span><span className="sidebar-account-meta">本机维护者</span></span><ChevronUp size={16} aria-hidden="true" /></button></Dropdown>
    </div></div></aside>
    <div className="workspace"><div className="topbar"><span className="breadcrumbs">学习管理 / {({ tasks: '学习批次', overview: '账本总览', candidates: '能力实体', validations: '脚本测试' } as Record<string, string>)[category] || '学习批次'}</span><Button type="text" aria-label={dark ? '切换浅色主题' : '切换深色主题'} icon={dark ? <Sun size={16} /> : <Moon size={16} />} onClick={onTheme} /></div><main className="page" key={auth.user?.id || auth.user?.username}>{content}</main></div>
  </div>;
}