import { Link, Outlet, useLocation } from 'react-router-dom'
import { LayoutDashboard, LogOut, BookOpen, GraduationCap, BarChart, Settings } from 'lucide-react'
import { useAppStore } from '@/store/useAppStore'
import { WebsiteSelector } from '@/components/WebsiteSelector'

export function AdminLayout() {
  const { logout } = useAppStore()
  const location = useLocation()

  const navItems = [
    { name: 'Dashboard', path: '/admin/dashboard', icon: LayoutDashboard },
    { name: 'Questions', path: '/admin/questions', icon: BookOpen },
    { name: 'Tryouts', path: '/admin/tryouts', icon: GraduationCap },
    { name: 'Reports', path: '/admin/reports', icon: BarChart },
    { name: 'Settings', path: '/admin/settings', icon: Settings },
  ]

  return (
    <div className="flex h-screen overflow-hidden bg-muted/20">
      {/* Sidebar */}
      <aside className="w-64 flex-shrink-0 border-r bg-background">
        <div className="flex h-16 items-center px-6 border-b">
          <span className="text-lg font-bold">IRT Bank Soal</span>
        </div>
        <nav className="p-4 space-y-1">
          {navItems.map((item) => {
            const isActive = location.pathname.startsWith(item.path)
            return (
              <Link
                key={item.path}
                to={item.path}
                className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
                  isActive 
                    ? 'bg-primary text-primary-foreground' 
                    : 'hover:bg-muted text-muted-foreground hover:text-foreground'
                }`}
              >
                <item.icon className="h-4 w-4" />
                {item.name}
              </Link>
            )
          })}
        </nav>
        <div className="absolute bottom-4 left-4 right-4">
          <button
            onClick={() => {
              logout()
              window.location.href = '/login'
            }}
            className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors"
          >
            <LogOut className="h-4 w-4" />
            Logout
          </button>
        </div>
      </aside>

      {/* Main Content Area */}
      <main className="flex-1 overflow-y-auto">
        <div className="h-16 flex items-center justify-between px-6 border-b bg-background">
          <div className="flex items-center gap-4">
            <WebsiteSelector />
          </div>
          <div className="text-sm text-muted-foreground flex items-center gap-2">
            <span className="w-2 h-2 rounded-full bg-green-500"></span>
            System Online
          </div>
        </div>
        <div className="p-8">
          <Outlet />
        </div>
      </main>
    </div>
  )
}