/**
 * DetailPanel — 右侧详情面板
 *
 * 通过 Tab 切换显示 Trace / Memory / Tasks / Workspace。
 *
 * v0.3.0: Tab 状态提升到 ui-store，支持斜杠命令切换标签。
 */

import { Box, Tabs, Tab } from '@mui/material';
import { Activity, Brain, ListChecks, FolderOpen } from 'lucide-react';
import { TraceViewer } from '@renderer/components/trace/TraceViewer';
import { TokenUsage } from '@renderer/components/trace/TokenUsage';
import { AgentMonitor } from '@renderer/components/layout/AgentMonitor';
import { MemoryViewer } from '@renderer/components/memory/MemoryViewer';
import { TaskList } from '@renderer/components/tasks/TaskList';
import { WorkspaceViewer } from '@renderer/components/workspace/WorkspaceViewer';
import { ErrorBoundary } from '@renderer/components/common/ErrorBoundary';
import { LAYOUT } from '@renderer/lib/constants';
import { useUIStore, type DetailTab } from '@renderer/stores/ui-store';

export function DetailPanel(): React.JSX.Element {
  // v0.3.0: 从 ui-store 获取 tab 状态（支持斜杠命令切换）
  const tab = useUIStore((s) => s.detailTab);
  const setTab = useUIStore((s) => s.setDetailTab);

  // v0.3.0 修复：验证 tab 值有效性，非预期值回退到 'trace'
  const validTabs: DetailTab[] = ['trace', 'memory', 'tasks', 'workspace'];
  const safeTab: DetailTab = validTabs.includes(tab) ? tab : 'trace';

  return (
    <Box
      component="aside"
      sx={{
        flexShrink: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden',
        bgcolor: 'background.paper', borderLeft: 1, borderColor: 'divider', width: LAYOUT.DETAIL_WIDTH,
      }}
    >
      <Tabs
        value={safeTab}
        onChange={(_, v) => {
          // v0.3.0 修复：类型安全检查，只接受有效的 tab 值
          if (typeof v === 'string' && validTabs.includes(v as DetailTab)) {
            setTab(v as DetailTab);
          }
        }}
        variant="fullWidth"
        sx={{
          minHeight: 32, height: 32, flexShrink: 0,
          borderBottom: 1, borderColor: 'divider',
          '& .MuiTab-root': { minHeight: 32, height: 32, fontSize: 11, textTransform: 'none', py: 0, px: 1 },
          '& .MuiTabs-indicator': { height: 2 },
        }}
      >
        <Tab icon={<Activity size={12} />} iconPosition="start" label="Trace" value="trace" />
        <Tab icon={<Brain size={12} />} iconPosition="start" label="Memory" value="memory" />
        <Tab icon={<ListChecks size={12} />} iconPosition="start" label="Tasks" value="tasks" />
        <Tab icon={<FolderOpen size={12} />} iconPosition="start" label="Workspace" value="workspace" />
      </Tabs>

      <Box sx={{ p: 1.5, flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0 }}>
        {safeTab === 'trace' && (
          <ErrorBoundary fallbackTitle="Trace 渲染失败">
            <>
              <TraceViewer />
              <TokenUsage />
              <AgentMonitor />
            </>
          </ErrorBoundary>
        )}
        {safeTab === 'memory' && (
          <ErrorBoundary fallbackTitle="Memory 渲染失败">
            <MemoryViewer />
          </ErrorBoundary>
        )}
        {safeTab === 'tasks' && (
          <ErrorBoundary fallbackTitle="Tasks 渲染失败">
            <TaskList />
          </ErrorBoundary>
        )}
        {safeTab === 'workspace' && (
          <ErrorBoundary fallbackTitle="Workspace 渲染失败">
            <WorkspaceViewer />
          </ErrorBoundary>
        )}
      </Box>
    </Box>
  );
}
