import {
  LayoutDashboard,
  Users,
  Package,
  Shield,
  Scroll,
  Gift,
  ArrowLeftRight,
  GraduationCap,
  Settings,
  LogOut,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";
import { useState } from "react";
import { cn } from "../lib/utils";
import type { AuthUser } from "../lib/useAuth";

export type Page =
  | "dashboard"
  | "users"
  | "items"
  | "classes"
  | "quests"
  | "lootdrops"
  | "moderation"
  | "transactions"
  | "settings";

const navItems: { page: Page; label: string; icon: React.ComponentType<{ className?: string }> }[] = [
  { page: "dashboard", label: "Dashboard", icon: LayoutDashboard },
  { page: "users", label: "Users", icon: Users },
  { page: "items", label: "Items", icon: Package },
  { page: "classes", label: "Classes", icon: GraduationCap },
  { page: "quests", label: "Quests", icon: Scroll },
  { page: "lootdrops", label: "Lootdrops", icon: Gift },
  { page: "moderation", label: "Moderation", icon: Shield },
  { page: "transactions", label: "Transactions", icon: ArrowLeftRight },
  { page: "settings", label: "Settings", icon: Settings },
];

export default function Layout({
  user,
  logout,
  currentPage,
  onNavigate,
  children,
}: {
  user: AuthUser;
  logout: () => Promise<void>;
  currentPage: Page;
  onNavigate: (page: Page) => void;
  children: React.ReactNode;
}) {
  const [collapsed, setCollapsed] = useState(false);

  const avatarUrl = user.avatar
    ? `https://cdn.discordapp.com/avatars/${user.discordId}/${user.avatar}.png?size=64`
    : null;

  return (
    <div className="min-h-screen flex">
      {/* Sidebar */}
      <aside
        className={cn(
          "fixed inset-y-0 left-0 z-50 flex flex-col bg-background border-r border-border transition-all duration-200",
          collapsed ? "w-16" : "w-60"
        )}
      >
        {/* Logo */}
        <div className="flex items-center h-16 px-4 border-b border-border">
          <div className="font-display text-xl font-bold tracking-tight">
            {collapsed ? "A" : "Aurora"}
          </div>
        </div>

        {/* Nav items */}
        <nav className="flex-1 py-3 px-2 space-y-1 overflow-y-auto">
          {navItems.map(({ page, label, icon: Icon }) => (
            <button
              key={page}
              onClick={() => onNavigate(page)}
              className={cn(
                "w-full flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors",
                currentPage === page
                  ? "bg-primary/15 text-primary border-l-4 border-primary"
                  : "text-text-tertiary hover:bg-primary/8 hover:text-foreground"
              )}
            >
              <Icon className={cn("w-5 h-5 shrink-0", currentPage === page && "text-primary")} />
              {!collapsed && <span>{label}</span>}
            </button>
          ))}
        </nav>

        {/* User & collapse */}
        <div className="border-t border-border p-3 space-y-2">
          {!collapsed && (
            <div className="flex items-center gap-3 px-2 py-1.5">
              {avatarUrl ? (
                <img src={avatarUrl} alt={user.username} className="w-8 h-8 rounded-full" />
              ) : (
                <div className="w-8 h-8 rounded-full bg-surface flex items-center justify-center text-xs font-medium">
                  {user.username[0]?.toUpperCase()}
                </div>
              )}
              <div className="flex-1 min-w-0">
                <div className="text-sm font-medium truncate">{user.username}</div>
              </div>
            </div>
          )}
          <div className={cn("flex", collapsed ? "flex-col items-center gap-2" : "items-center justify-between px-2")}>
            <button
              onClick={logout}
              className="inline-flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-text-tertiary hover:text-destructive hover:bg-destructive/10 transition-colors"
              title="Sign out"
            >
              <LogOut className="w-4 h-4" />
              {!collapsed && <span>Sign out</span>}
            </button>
            <button
              onClick={() => setCollapsed((c) => !c)}
              className="p-1.5 rounded-md text-text-tertiary hover:text-foreground hover:bg-primary/10 transition-colors"
              title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
            >
              {collapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
            </button>
          </div>
        </div>
      </aside>

      {/* Main content */}
      <main className={cn("flex-1 transition-all duration-200", collapsed ? "ml-16" : "ml-60")}>
        <div className="max-w-[1600px] mx-auto px-6 py-8">
          {children}
        </div>
      </main>
    </div>
  );
}
