import { useCallback, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { cn } from '@/lib/utils';
import { useThemeStore, useNotificationStore, useUserStore } from '@/store';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Bell,
  Menu,
  Settings,
  User,
  LogOut,
  CheckCheck,
  AlertTriangle,
  Info,
  CheckCircle,
  Palette,
  Check,
} from 'lucide-react';
import { formatDistanceToNow } from '@/lib/utils';
import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';

// Keyboard shortcut handler — Cmd/Ctrl+B 切换侧边栏
function useKeyboardShortcuts() {
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
        e.preventDefault();
        window.dispatchEvent(new CustomEvent('toggle-sidebar'));
      }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, []);
}

export function Header() {
  const { sidebarCollapsed, toggleSidebar } = useThemeStore();
  const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotificationStore();
  const { user, logout } = useUserStore();
  const { theme, setTheme } = useTheme();
  const navigate = useNavigate();
  useKeyboardShortcuts();

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

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

  const getNotificationIcon = useCallback((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={cn(
        'fixed top-0 right-0 z-30 h-[var(--header-height)] bg-[var(--dg-bg-secondary)]/95 backdrop-blur-md',
        'border-b border-[var(--dg-border)] transition-[margin] duration-300 ease-in-out',
        'supports-[backdrop-filter]:bg-[var(--dg-bg-secondary)]/75',
      )}
      style={{ marginLeft: 'var(--sidebar-width)', left: 0 }}
    >
      <div className="flex items-center justify-between h-full px-4">
        {/* Left: Toggle & Search */}
        <div className="flex items-center gap-3 flex-1 min-w-0">
          {/* Sidebar Toggle */}
          <Button
            variant="ghost"
            size="icon"
            className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] flex-shrink-0"
            onClick={toggleSidebar}
            title={sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'}
          >
            <Menu className="h-4 w-4" />
          </Button>
        </div>

        {/* Right: Actions */}
        <div className="flex items-center gap-1.5 flex-shrink-0">
          {/* Theme Switcher */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
                title="切换主题"
              >
                <Palette className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align="end"
              className="w-60 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
              style={{ boxShadow: 'var(--shadow-dropdown)' }}
            >
              <DropdownMenuLabel className="text-[var(--dg-text-secondary)]">主题切换</DropdownMenuLabel>
              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
              {THEME_OPTIONS.map((option) => (
                <DropdownMenuItem
                  key={option.id}
                  className={cn(
                    'flex items-center gap-2.5 cursor-pointer transition-colors',
                    'focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]',
                    theme === option.id
                      ? 'text-[var(--dg-text-primary)]'
                      : 'text-[var(--dg-text-secondary)]',
                  )}
                  onClick={() => setTheme(option.id)}
                >
                  <span
                    className="w-3.5 h-3.5 rounded-full shrink-0 ring-2"
                    style={{
                      backgroundColor: option.primaryColor,
                      boxShadow: '0 0 0 2px var(--dg-bg-primary)',
                    }}
                  />
                  <div className="flex-1 min-w-0">
                    <span className="text-sm font-medium">{option.name}</span>
                    <span className="block text-xs text-[var(--dg-text-muted)] truncate">
                      {option.description}
                    </span>
                  </div>
                  {theme === option.id && (
                    <Check className="h-4 w-4 text-[var(--dg-blue)] shrink-0" />
                  )}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>

          {/* Notifications */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] relative"
                title="通知"
              >
                <Bell className="h-4 w-4" />
                {unreadCount > 0 && (
                  <span className="absolute -top-0.5 -right-0.5 h-4.5 w-4.5 rounded-full bg-red-500 text-[10px] font-semibold text-white flex items-center justify-center animate-scale-in">
                    {unreadCount > 99 ? '99+' : unreadCount}
                  </span>
                )}
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align="end"
              className="w-96 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] p-0"
              style={{ boxShadow: 'var(--shadow-dropdown)' }}
            >
              {/* Header */}
              <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--dg-border)]">
                <span className="text-sm font-medium text-[var(--dg-text-primary)]">
                  通知
                </span>
                {unreadCount > 0 && (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-7 text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
                    onClick={markAllAsRead}
                  >
                    <CheckCheck className="h-3.5 w-3.5 mr-1" />
                    全部已读
                  </Button>
                )}
              </div>

              {/* Notification List */}
              <div className="max-h-80 overflow-y-auto scrollbar-thin">
                {notifications.length === 0 ? (
                  <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
                    <Bell className="h-10 w-10 mb-3 opacity-30" />
                    <p className="text-sm">暂无通知</p>
                  </div>
                ) : (
                  notifications.slice(0, 10).map((notification) => (
                    <div
                      key={notification.id}
                      className={cn(
                        'flex items-start gap-3 px-4 py-3 cursor-pointer transition-colors',
                        'hover:bg-[var(--dg-bg-hover)] border-b border-[var(--dg-border)] last:border-0',
                        !notification.read && 'bg-[var(--dg-blue)]/[0.04]',
                      )}
                      onClick={() => markAsRead(notification.id)}
                    >
                      <div className="mt-0.5 flex-shrink-0">
                        {getNotificationIcon(notification.type)}
                      </div>
                      <div className="flex-1 min-w-0">
                        <p
                          className={cn(
                            'text-sm font-medium',
                            !notification.read
                              ? 'text-[var(--dg-text-primary)]'
                              : 'text-[var(--dg-text-secondary)]',
                          )}
                        >
                          {notification.title}
                        </p>
                        <p className="text-xs text-[var(--dg-text-muted)] mt-0.5 line-clamp-2">
                          {notification.message}
                        </p>
                        <p className="text-xs text-[var(--dg-text-muted)]/60 mt-1">
                          {formatDistanceToNow(notification.timestamp)}
                        </p>
                      </div>
                      {!notification.read && (
                        <span className="w-2 h-2 rounded-full bg-[var(--dg-blue)] mt-2 flex-shrink-0" />
                      )}
                    </div>
                  ))
                )}
              </div>

              {/* Footer */}
              {notifications.length > 0 && (
                <div className="px-4 py-2 border-t border-[var(--dg-border)] text-center">
                  <button
                    className="text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-blue)] transition-colors"
                    onClick={() => navigate('/alert-center')}
                  >
                    查看全部通知
                  </button>
                </div>
              )}
            </DropdownMenuContent>
          </DropdownMenu>

          <Separator orientation="vertical" className="h-5 bg-[var(--dg-border)] mx-1" />

          {/* User Menu */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                className="h-8 gap-2 px-2 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
              >
                <div className="w-7 h-7 rounded-full bg-gradient-to-br from-[var(--dg-blue)] to-[var(--dg-purple)] flex items-center justify-center text-white text-xs font-bold">
                  {displayName.charAt(0).toUpperCase()}
                </div>
                <span className="hidden md:inline text-sm max-w-[100px] truncate">
                  {displayName}
                </span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align="end"
              className="w-52 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
              style={{ boxShadow: 'var(--shadow-dropdown)' }}
            >
              <DropdownMenuLabel className="text-[var(--dg-text-secondary)]">
                <div className="flex flex-col">
                  <span className="text-sm font-medium text-[var(--dg-text-primary)]">
                    {displayName}
                  </span>
                  <span className="text-xs text-[var(--dg-text-muted)] truncate">
                    {user?.email || user?.username || ''}
                  </span>
                </div>
              </DropdownMenuLabel>
              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
              <DropdownMenuItem
                className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
                onClick={() => navigate('/users')}
              >
                <User className="h-4 w-4 mr-2.5" />
                个人中心
              </DropdownMenuItem>
              <DropdownMenuItem
                className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
                onClick={() => navigate('/settings')}
              >
                <Settings className="h-4 w-4 mr-2.5" />
                账号设置
              </DropdownMenuItem>
              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
              <DropdownMenuItem
                className="text-red-400 focus:bg-red-500/10 focus:text-red-400 cursor-pointer"
                onClick={handleLogout}
              >
                <LogOut className="h-4 w-4 mr-2.5" />
                退出登录
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  );
}