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
} from "lucide-react"
import { useQuery } from "@tanstack/react-query"
import { api } from "../lib/api"
import { useTheme } from "../lib/theme"

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 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: "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)}
        className={`${baseClasses} ${isActive ? activeClasses : inactiveClasses}`}
      >
        <Icon className="w-4 h-4" />
        {item.label}
      </Link>
    )
  }

  return (
    <nav 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="text-xl font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-2"
              >
                EmberClone
              </Link>
              <div 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">
                ⌘K
              </div>
            </div>
            
            <div className="hidden md:flex items-center gap-1">
              {allItems.map((item) => (
                <NavLink key={item.to} item={item} />
              ))}
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button 
              onClick={toggleTheme}
              className="p-2 rounded-full text-gray-500 hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
              title="Toggle Theme"
            >
              {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
            </button>

            <div className="flex items-center gap-1 p-1 rounded-full bg-gray-100 dark:bg-slate-800 border border-gray-200 dark:border-slate-700">
              <button 
                onClick={() => setLang('en')}
                className={`px-2 py-1 text-[10px] font-bold rounded-full transition-all ${lang === 'en' ? 'bg-white dark:bg-slate-600 text-indigo-600 dark:text-white shadow-sm' : 'text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-200'}`}
              >
                EN
              </button>
              <button 
                onClick={() => setLang('de')}
                className={`px-2 py-1 text-[10px] font-bold rounded-full transition-all ${lang === 'de' ? 'bg-white dark:bg-slate-600 text-indigo-600 dark:text-white shadow-sm' : 'text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-200'}`}
              >
                DE
              </button>
            </div>
            
            <button 
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="md:hidden p-2 rounded-md text-gray-500 hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-800"
            >
              {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className="md: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>
      )}
    </nav>
  )
}