import React, { useState } from "react"
import { Link, useLocation } from "@tanstack/react-router"
import { 
  Home, 
  Clock, 
  Users, 
  FolderKanban, 
  Calendar,
  ShieldCheck,
  Sun,
  Moon,
  Settings,
  ListTree,
  Menu,
  X,
  Zap,
  CreditCard,
  Languages,
  LogOut,
  FileText,
  LayoutTemplate,
  Bell
} from "lucide-react"
import { useQuery } from "@tanstack/react-query"
import { api } from "../lib/api"
import { useTheme } from "../lib/theme"
import Avatar from "./Avatar"

function NotificationBell() {
  const { data: notifications, isLoading } = useQuery({
    queryKey: ['notifications', 'unread'],
    queryFn: async () => {
      const res = await api.get('/notifications/unread');
      return res;
    }
  })

  const unreadCount = notifications?.length || 0

  return (
    <div className="relative">
      <button 
        className="p-2 text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors relative"
        aria-label="Notifications"
      >
        <Bell className="w-5 h-5" />
        {unreadCount > 0 && (
          <span className="absolute top-1.5 right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white ring-2 ring-white dark:ring-slate-900">
            {unreadCount > 9 ? '9+' : unreadCount}
          </span>
        )}
      </button>
    </div>
  )
}

export default function Nav() {
  const location = useLocation()
  const { theme, toggleTheme } = useTheme()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [lang, setLang] = useState<'en' | 'de'>('en')
  
  const { data: user } = useQuery({
    queryKey: ['me'],
    queryFn: api.getMe
  })

  const { data: settings } = useQuery({
    queryKey: ['settings'],
    queryFn: api.getSettings
  })

  const navItems = [
    { label: "Dashboard", to: "/", icon: Home },
    { label: "Time Entries", to: "/time-entries", icon: Clock },
    { label: "Calendar", to: "/calendar", icon: Calendar },
    { label: "Customers", to: "/customers", icon: Users },
    { label: "Projects", to: "/projects", icon: FolderKanban },
    { label: "Invoices", to: "/invoices", icon: FileText },
    { label: "Templates", to: "/templates", icon: LayoutTemplate },
    { label: "Integrations", to: "/integrations", icon: Zap },
    { label: "Billing", to: "/billing", icon: CreditCard },
  ]

  const adminItems = [
    { label: "Admin", to: "/admin", icon: ShieldCheck },
    { label: "Audit Log", to: "/admin/audit-log", icon: ListTree },
    { label: "Webhooks", to: "/admin/webhooks", icon: Zap },
  ]

  const allItems = user?.role === 'admin' 
    ? [...navItems, ...adminItems] 
    : navItems

  const NavLink = ({ item }: { item: typeof navItems[0] }) => {
    const isActive = location.pathname === item.to
    const Icon = item.icon
    
    const baseClasses = "flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors"
    const activeClasses = "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
    const inactiveClasses = "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
    
    return (
      <Link
        to={item.to}
        onClick={() => setIsMobileMenuOpen(false)}
        aria-current={isActive ? 'page' : undefined}
        className={`${baseClasses} ${isActive ? activeClasses : inactiveClasses}`}
      >
        <Icon className="w-4 h-4" />
        {item.label}
      </Link>
    )
  }

  return (
    <nav 
      role="navigation" 
      className="bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 sticky top-0 z-50"
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex items-center gap-8">
            <div className="flex items-center gap-3">
              <Link 
                to="/" 
                className="flex items-center gap-2"
              >
                {settings?.logoUrl ? (
                  <img 
                    src={settings.logoUrl} 
                    alt="Logo" 
                    className="h-8 w-auto object-contain"
                  />
                ) : (
                  <span className="text-xl font-bold text-indigo-600 dark:text-indigo-400">
                    EmberClone
                  </span>
                )}
              </Link>
              <div 
                role="button"
                tabIndex={0}
                aria-label="Open command palette"
                className="hidden md:flex items-center px-1.5 py-0.5 rounded border border-gray-300 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-[10px] font-medium text-gray-400 dark:text-slate-500 cursor-pointer"
              >
                ⌘K
              </div>
            </div>
            
            <div className="hidden lg:flex items-center gap-1">
              {allItems.map((item) => (
                <NavLink key={item.to} item={item} />
              ))}
            </div>
          </div>

          <div className="flex items-center gap-2 sm:gap-4">
            <div className="hidden sm:flex items-center gap-1">
              <button 
                onClick={() => setLang(lang === 'en' ? 'de' : 'en')}
                className="p-2 text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
                title="Change Language"
              >
                <Languages className="w-5 h-5" />
              </button>
              <button 
                onClick={toggleTheme}
                className="p-2 text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
                title="Toggle Theme"
              >
                {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
              </button>
            </div>

            <div className="flex items-center gap-2 border-l border-gray-200 dark:border-slate-800 pl-2 sm:pl-4">
              <NotificationBell />
              <Avatar user={user} />
            </div>

            <button 
              className="lg:hidden p-2 text-gray-500 hover:text-gray-700 dark:text-slate-400 dark:hover:text-slate-200"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className="lg:hidden bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 px-4 py-4 space-y-1">
          {allItems.map((item) => (
            <NavLink key={item.to} item={item} />
          ))}
          <div className="pt-4 mt-4 border-t border-gray-200 dark:border-slate-800 flex flex-col gap-1">
            <Link 
              to="/settings" 
              className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-50 dark:text-slate-400 dark:hover:bg-slate-800"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              <Settings className="w-4 h-4" />
              Settings
            </Link>
            <button 
              className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
              onClick={() => {
                api.logout();
                setIsMobileMenuOpen(false);
              }}
            >
              <LogOut className="w-4 h-4" />
              Logout
            </button>
          </div>
        </div>
      )}
    </nav>
  )
}