/**
 * Header Bar — 应用顶部栏
 *
 * H-7 修复: 规范要求布局包含 Header Bar（全宽），之前 App.tsx 缺失此组件。
 * @see docs/MetonaAI-Desktop UI UX 设计集成方案.html — 整体布局
 *
 * 布局: Header Bar (全宽) + [Sidebar | ChatPanel | DetailPanel] + StatusBar
 *
 * 功能：
 * - 应用标题/Logo
 * - 当前 Provider/Model 显示
 * - 面板切换（侧边栏、详情面板、专注模式）
 * - 主题切换
 * - 设置入口
 */

import { AppBar, Toolbar, Typography, IconButton, Box, Chip, Tooltip, Divider } from '@mui/material';
import {
  PanelLeft,
  PanelRight,
  Focus,
  Settings,
  Sun,
  Moon,
  Monitor,
} from 'lucide-react';
import { useUIStore, type ThemeMode } from '@renderer/stores/ui-store';
import { useAgentStore } from '@renderer/stores/agent-store';

const PROVIDER_LABELS: Record<string, string> = {
  deepseek: 'DeepSeek',
  agnes: 'Agnes',
  mimo: 'MiMo',
  ollama: 'Ollama',
};

export function Header(): React.JSX.Element {
  const sidebarVisible = useUIStore((s) => s.sidebarVisible);
  const detailVisible = useUIStore((s) => s.detailVisible);
  const focusMode = useUIStore((s) => s.focusMode);
  const theme = useUIStore((s) => s.theme);
  const toggleSidebar = useUIStore((s) => s.toggleSidebar);
  const toggleDetail = useUIStore((s) => s.toggleDetail);
  const toggleFocusMode = useUIStore((s) => s.toggleFocusMode);
  const setTheme = useUIStore((s) => s.setTheme);
  const openSettings = useUIStore((s) => s.openSettings);

  const provider = useAgentStore((s) => s.provider);
  const model = useAgentStore((s) => s.model);

  const cycleTheme = () => {
    const order: ThemeMode[] = ['light', 'dark', 'auto'];
    const idx = order.indexOf(theme);
    setTheme(order[(idx + 1) % order.length]);
  };

  const ThemeIcon = theme === 'light' ? Sun : theme === 'dark' ? Moon : Monitor;
  const themeLabel = theme === 'light' ? '浅色主题' : theme === 'dark' ? '深色主题' : '跟随系统';

  return (
    <AppBar
      position="static"
      elevation={0}
      sx={{
        flexShrink: 0,
        borderBottom: 1,
        borderColor: 'divider',
        bgcolor: 'background.paper',
      }}
    >
      <Toolbar variant="dense" sx={{ minHeight: 48, gap: 1 }}>
        {/* 左侧：应用标题 */}
        <Typography
          variant="h6"
          component="span"
          sx={{
            fontWeight: 700,
            background: 'linear-gradient(135deg, #6366f1, #a855f7)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            mr: 1,
          }}
        >
          MetonaAI
        </Typography>

        {/* Provider/Model 显示 */}
        {provider && (
          <>
            <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
            <Chip
              size="small"
              label={PROVIDER_LABELS[provider] ?? provider}
              color="primary"
              variant="outlined"
            />
            {model && (
              <Typography variant="caption" color="text.secondary" sx={{ ml: 0.5 }}>
                {model}
              </Typography>
            )}
          </>
        )}

        {/* 右侧：操作按钮 */}
        <Box sx={{ flexGrow: 1 }} />

        <Tooltip title={sidebarVisible ? '隐藏侧边栏' : '显示侧边栏'}>
          <IconButton
            size="small"
            onClick={toggleSidebar}
            color={sidebarVisible ? 'primary' : 'default'}
            disabled={focusMode}
          >
            <PanelLeft size={18} />
          </IconButton>
        </Tooltip>

        <Tooltip title={detailVisible ? '隐藏详情面板' : '显示详情面板'}>
          <IconButton
            size="small"
            onClick={toggleDetail}
            color={detailVisible ? 'primary' : 'default'}
            disabled={focusMode}
          >
            <PanelRight size={18} />
          </IconButton>
        </Tooltip>

        <Tooltip title={focusMode ? '退出专注模式' : '进入专注模式'}>
          <IconButton
            size="small"
            onClick={toggleFocusMode}
            color={focusMode ? 'primary' : 'default'}
          >
            <Focus size={18} />
          </IconButton>
        </Tooltip>

        <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />

        <Tooltip title={themeLabel}>
          <IconButton size="small" onClick={cycleTheme}>
            <ThemeIcon size={18} />
          </IconButton>
        </Tooltip>

        <Tooltip title="设置">
          <IconButton size="small" onClick={openSettings}>
            <Settings size={18} />
          </IconButton>
        </Tooltip>
      </Toolbar>
    </AppBar>
  );
}
