MediaCrawler/webui/src/components/layout/Sidebar.tsx

import { useState } from 'react'
import { Briefcase, Bug, Wifi, BarChart3, Cog, LogOut, Radar, Settings, Terminal } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Badge } from '@/components/ui/badge'
import { SystemSettingsDialog } from '@/components/settings/SystemSettingsDialog'
import { useCrawlerStore } from '@/store/crawlerStore'
import { useCrawlerStatus } from '@/hooks/useCrawler'
import type { AppView } from '@/App'
import { LanguageSwitch } from './LanguageSwitch'
import { PlatformSwitcher } from './PlatformSwitcher'
import { ThemeToggle } from './ThemeToggle'

interface SidebarProps {
  currentView: AppView
  onViewChange: (view: AppView) => void
  onLogout: () => void
}

const NAV_ITEMS: Array<{ value: AppView; label: string; icon: typeof Terminal }> = [
  { value: 'crawler', label: '采集', icon: Terminal },
  { value: 'monitor', label: '监控', icon: Radar },
  { value: 'operation', label: '运营', icon: Briefcase },
  { value: 'report', label: '报表', icon: BarChart3 },
  { value: 'settings', label: '设置', icon: Settings },
]

export function Sidebar({ currentView, onViewChange, onLogout }: SidebarProps) {
  const { t } = useTranslation()
  const status = useCrawlerStore((state) => state.status)
  const [systemSettingsOpen, setSystemSettingsOpen] = useState(false)

  // Poll status
  useCrawlerStatus()

  const isRunning = status === 'running'

  return (
    <header className="h-14 flex-shrink-0 glass-panel border-b border-cyber-border-subtle relative z-10">
      <div className="h-full px-4 flex items-center justify-between">
        {/* Left: Logo, run state, workspace switch */}
        <div className="flex items-center gap-3">
          <Bug className="w-5 h-5 text-cyber-neon-cyan" />
          <span className="font-mono font-bold text-cyber-text-primary tracking-wider text-sm">
            综合采集平台
          </span>
          {isRunning && (
            <Badge variant="running" className="text-[10px]">
              {t('status.active')}
            </Badge>
          )}
          {isRunning && (
            <span className="w-2 h-2 bg-cyber-neon-green rounded-full shadow-glow-green-sm animate-pulse-fast" />
          )}

          {/* Workspace switch */}
          <div className="flex items-center gap-1 ml-2 p-0.5 rounded-md border border-cyber-border-subtle bg-cyber-bg-tertiary">
            {NAV_ITEMS.map((item) => {
              const Icon = item.icon
              const active = currentView === item.value
              return (
                <button
                  key={item.value}
                  onClick={() => onViewChange(item.value)}
                  className={`flex items-center gap-1.5 px-2.5 py-1 rounded text-[11px] font-mono transition-all ${
                    active
                      ? 'bg-cyber-neon-cyan/20 text-cyber-neon-cyan border border-cyber-neon-cyan/40'
                      : 'text-cyber-text-muted border border-transparent hover:text-cyber-text-secondary'
                  }`}
                >
                  <Icon className="w-3 h-3" />
                  {item.label}
                </button>
              )
            })}
          </div>
        </div>

        {/* Right: platform scope, then actions and status */}
        <div className="flex items-center gap-3">
          {/* Scopes every workspace at once. */}
          <PlatformSwitcher />

          {/* System-wide settings: deliberately separate from the platform-scoped
              「设置」 page, because these values are not per platform. */}
          <button
            onClick={() => setSystemSettingsOpen(true)}
            title="系统设置（对所有平台生效）"
            className="flex items-center gap-1.5 px-2 py-1 rounded text-[11px] font-mono text-cyber-text-muted border border-transparent hover:text-cyber-neon-cyan hover:border-cyber-neon-cyan/40 transition-all"
          >
            <Cog className="w-3.5 h-3.5" />
            系统设置
          </button>

          {/* Theme Toggle */}
          <ThemeToggle />
          {/* Language Switch */}
          <LanguageSwitch />

          {/* Status Info */}
          <div className="hidden lg:flex items-center gap-2 text-xs font-mono">
            <span className="text-cyber-text-muted">{t('sidebar.api')}:</span>
            <span className="text-cyber-neon-green">v1.0.0</span>
            <div className="flex items-center gap-1.5">
              <Wifi className="w-3 h-3 text-cyber-text-secondary" />
              <span className="text-cyber-text-secondary">{t('sidebar.local')}</span>
              <span className="status-dot status-dot-online" />
            </div>
          </div>

          {/* Logging out unmounts the whole tree, which closes the log
              WebSocket through the existing connection-count cleanup. */}
          <button
            onClick={onLogout}
            title="退出登录"
            className="flex items-center gap-1.5 px-2 py-1 rounded text-[11px] font-mono text-cyber-text-muted border border-transparent hover:text-cyber-neon-pink hover:border-cyber-neon-pink/40 transition-all"
          >
            <LogOut className="w-3 h-3" />
            退出
          </button>
        </div>
      </div>

      <SystemSettingsDialog
        open={systemSettingsOpen}
        onOpenChange={setSystemSettingsOpen}
      />
    </header>
  )
}