import { useState } from 'react';
import { cn } from '@/lib/utils';
import { useThemeStore, useTabStore, useNotificationStore, useUserStore } from '@/store';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Search,
  Bell,
  Menu,
  X,
  Settings,
  User,
  LogOut,
  CheckCheck,
  AlertTriangle,
  Info,
  CheckCircle,
  Palette,
  Check,
} from 'lucide-react';
import { formatDistanceToNow } from '@/lib/utils';
import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';

export function Header() {
  const { sidebarCollapsed, toggleSidebar } = useThemeStore();
  const { tabs, activeTab, removeTab, setActiveTab } = useTabStore();
  const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotificationStore();
  const { user, logout } = useUserStore();
  const { theme, setTheme } = useTheme();
  const [searchValue, setSearchValue] = useState('');

  const handleLogout = () => {
    logout();
    window.location.href = '/login';
  };

  const displayName = user?.real_name || user?.username || '管理员';

  const getNotificationIcon = (type: string) => {
    switch (type) {
      case 'error':
        return <AlertTriangle className="h-4 w-4 text-red-500" />;
      case 'warning':
        return <AlertTriangle className="h-4 w-4 text-amber-500" />;
      case 'success':
        return <CheckCircle className="h-4 w-4 text-emerald-500" />;
      default:
        return <Info className="h-4 w-4 text-blue-500" />;
    }
  };

  return (
    <header className="fixed top-0 right-0 left-0 z-30 h-14 bg-slate-900/95 backdrop-blur supports-[backdrop-filter]:bg-slate-900/60 border-b border-slate-800 transition-all duration-300"
      style={{ marginLeft: sidebarCollapsed ? '4rem' : '16rem' }}
    >
      <div className="flex items-center justify-between h-full px-4">
        {/* Left: Toggle & Search */}
        <div className="flex items-center gap-3 flex-1">
          {sidebarCollapsed && (
            <Button
              variant="ghost"
              size="icon"
              className="h-8 w-8 text-slate-400 hover:text-slate-100"
              onClick={toggleSidebar}
            >
              <Menu className="h-4 w-4" />
            </Button>
          )}
          
          {/* Global Search */}
          <div className="relative w-96 max-w-full">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
            <Input
              type="text"
              placeholder="搜索服务器、应用、工单、文档..."
              value={searchValue}
              onChange={(e) => setSearchValue(e.target.value)}
              className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500 focus-visible:ring-blue-500/30"
            />
            <kbd className="absolute right-3 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-xs font-mono text-slate-500 bg-slate-800 rounded">
              ⌘K
            </kbd>
          </div>

        </div>

        {/* Right: Actions */}
        <div className="flex items-center gap-2">
          {/* Theme Switcher */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
                <Palette className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56 bg-slate-800 border-slate-700">
              <DropdownMenuLabel className="text-slate-300">主题切换</DropdownMenuLabel>
              <DropdownMenuSeparator className="bg-slate-700" />
              {THEME_OPTIONS.map((option) => (
                <DropdownMenuItem
                  key={option.id}
                  className={cn(
                    'flex items-center gap-2 cursor-pointer focus:bg-slate-700 focus:text-slate-100',
                    theme === option.id ? 'text-slate-100' : 'text-slate-300'
                  )}
                  onClick={() => setTheme(option.id)}
                >
                  <span
                    className="w-3 h-3 rounded-full shrink-0 ring-2 ring-slate-900"
                    style={{ backgroundColor: option.primaryColor }}
                  />
                  <div className="flex-1 min-w-0">
                    <span className="text-sm font-medium">{option.name}</span>
                    <span className="block text-xs text-slate-500 truncate">{option.description}</span>
                  </div>
                  {theme === option.id && <Check className="h-4 w-4 text-blue-400 shrink-0" />}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>

          {/* Notifications */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100 relative">
                <Bell className="h-4 w-4" />
                {unreadCount > 0 && (
                  <span className="absolute -top-0.5 -right-0.5 h-4 w-4 rounded-full bg-red-500 text-[10px] font-medium text-white flex items-center justify-center">
                    {unreadCount > 99 ? '99+' : unreadCount}
                  </span>
                )}
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-80 bg-slate-800 border-slate-700">
              <DropdownMenuLabel className="flex items-center justify-between text-slate-300">
                <span>通知</span>
                {unreadCount > 0 && (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-6 text-xs text-slate-400 hover:text-slate-100"
                    onClick={markAllAsRead}
                  >
                    <CheckCheck className="h-3 w-3 mr-1" />
                    全部已读
                  </Button>
                )}
              </DropdownMenuLabel>
              <DropdownMenuSeparator className="bg-slate-700" />
              <div className="max-h-80 overflow-y-auto">
                {notifications.length === 0 ? (
                  <div className="py-8 text-center text-slate-500">
                    <Bell className="h-8 w-8 mx-auto mb-2 opacity-50" />
                    <p className="text-sm">暂无通知</p>
                  </div>
                ) : (
                  notifications.slice(0, 10).map((notification) => (
                    <DropdownMenuItem
                      key={notification.id}
                      className={cn(
                        'flex items-start gap-3 p-3 cursor-pointer focus:bg-slate-700',
                        !notification.read && 'bg-slate-700/30'
                      )}
                      onClick={() => markAsRead(notification.id)}
                    >
                      {getNotificationIcon(notification.type)}
                      <div className="flex-1 min-w-0">
                        <p className={cn('text-sm font-medium', !notification.read ? 'text-slate-200' : 'text-slate-400')}>
                          {notification.title}
                        </p>
                        <p className="text-xs text-slate-500 mt-0.5 line-clamp-2">{notification.message}</p>
                        <p className="text-xs text-slate-600 mt-1">
                          {formatDistanceToNow(notification.timestamp)}
                        </p>
                      </div>
                      {!notification.read && (
                        <span className="w-2 h-2 rounded-full bg-blue-500 mt-1" />
                      )}
                    </DropdownMenuItem>
                  ))
                )}
              </div>
            </DropdownMenuContent>
          </DropdownMenu>

          <Separator orientation="vertical" className="h-6 bg-slate-800" />

          {/* User Menu */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="h-8 gap-2 px-2 text-slate-300 hover:text-slate-100">
                <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-white text-xs font-medium">
                  {displayName.charAt(0)}
                </div>
                <span className="hidden md:inline text-sm">{displayName}</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48 bg-slate-800 border-slate-700">
              <DropdownMenuLabel className="text-slate-300">我的账号</DropdownMenuLabel>
              <DropdownMenuSeparator className="bg-slate-700" />
              <DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
                <User className="h-4 w-4 mr-2" />
                个人中心
              </DropdownMenuItem>
              <DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
                <Settings className="h-4 w-4 mr-2" />
                账号设置
              </DropdownMenuItem>
              <DropdownMenuSeparator className="bg-slate-700" />
              <DropdownMenuItem className="text-red-400 focus:bg-slate-700 focus:text-red-400" onClick={handleLogout}>
                <LogOut className="h-4 w-4 mr-2" />
                退出登录
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      {/* Tabs */}
      {tabs.length > 0 && (
        <div className="flex items-center h-9 px-2 bg-slate-950 border-b border-slate-800 overflow-x-auto">
          {tabs.map((tab) => (
            <div
              key={tab.id}
              className={cn(
                'group flex items-center gap-2 px-3 py-1.5 text-sm border-r border-slate-800 cursor-pointer transition-colors whitespace-nowrap',
                activeTab === tab.id
                  ? 'bg-slate-900 text-slate-100'
                  : 'text-slate-500 hover:text-slate-300 hover:bg-slate-900/50'
              )}
              onClick={() => setActiveTab(tab.id)}
            >
              <span>{tab.title}</span>
              {tab.closable && (
                <button
                  className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-slate-700 transition-all"
                  onClick={(e) => {
                    e.stopPropagation();
                    removeTab(tab.id);
                  }}
                >
                  <X className="h-3 w-3" />
                </button>
              )}
            </div>
          ))}
        </div>
      )}
    </header>
  );
}