import { Link, useRouterState } from "@tanstack/react-router";
import {
  LayoutDashboard,
  Users,
  Wrench,
  Inbox,
  Megaphone,
  MessageSquare,
  Settings as SettingsIcon,
  Cpu,
  LogOut,
  Home,
  Wallet,
  CreditCard,
  Bot,
  Gift,
  ClipboardList,
  BookOpen,
} from "lucide-react";
import { supabase } from "@/integrations/supabase/client";
import { Button } from "@/components/ui/button";

type Item = { to: string; label: string; icon: typeof LayoutDashboard; exact?: boolean };
const items: Item[] = [
  { to: "/admin", label: "Dashboard", icon: LayoutDashboard, exact: true },
  { to: "/admin/users", label: "Users", icon: Users },
  { to: "/admin/orders", label: "Orders", icon: ClipboardList },
  { to: "/admin/catalog", label: "Catalogue", icon: BookOpen },
  { to: "/admin/services", label: "Services", icon: Wrench },
  { to: "/admin/requests", label: "Requests", icon: Inbox },
  { to: "/admin/deposits", label: "Deposits", icon: Wallet },
  { to: "/admin/payment-channels", label: "Payment channels", icon: CreditCard },
  { to: "/admin/ai", label: "AI Assistant", icon: Bot },
  { to: "/admin/marketing", label: "Offers & Marketing", icon: Gift },
  { to: "/admin/announcements", label: "Announcements", icon: Megaphone },
  { to: "/admin/contact", label: "Messages", icon: MessageSquare },
  { to: "/admin/settings", label: "Settings", icon: SettingsIcon },
];

export function AdminSidebar() {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const signOut = async () => {
    await supabase.auth.signOut();
    window.location.href = "/admin/login";
  };
  return (
    <aside className="flex h-full w-64 shrink-0 flex-col border-r bg-card/50 backdrop-blur">
      <div className="flex h-16 items-center gap-2 border-b px-4">
        <span className="grid h-9 w-9 place-items-center rounded-xl gradient-hero text-white shadow-glow">
          <Cpu className="h-5 w-5" />
        </span>
        <div className="min-w-0">
          <div className="truncate text-sm font-bold">Flexflares</div>
          <div className="text-xs text-muted-foreground">Admin Panel</div>
        </div>
      </div>
      <nav className="flex-1 space-y-1 p-3">
        {items.map((it) => {
          const active = it.exact ? pathname === it.to : pathname.startsWith(it.to);
          const Icon = it.icon;
          return (
            <Link
              key={it.to}
              to={it.to as "/admin"}
              className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                active
                  ? "bg-primary/10 text-primary"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground"
              }`}
            >
              <Icon className="h-4 w-4" />
              {it.label}
            </Link>
          );
        })}
      </nav>
      <div className="space-y-2 border-t p-3">
        <Button asChild variant="ghost" size="sm" className="w-full justify-start">
          <Link to="/">
            <Home className="mr-2 h-4 w-4" /> View site
          </Link>
        </Button>
        <Button variant="outline" size="sm" className="w-full justify-start" onClick={signOut}>
          <LogOut className="mr-2 h-4 w-4" /> Sign out
        </Button>
      </div>
    </aside>
  );
}