import Link from "next/link";
import {
  Crown,
  FileText,
  FolderTree,
  Image,
  LayoutDashboard,
  LogOut,
  MapPin,
  Megaphone,
  Users,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { logoutAction } from "@/lib/actions/auth";

const links = [
  { href: "/admin", label: "儀表板", icon: LayoutDashboard },
  { href: "/admin/venues", label: "場地管理", icon: MapPin },
  { href: "/admin/articles", label: "指南管理", icon: FileText },
  { href: "/admin/categories", label: "分類管理", icon: FolderTree },
  { href: "/admin/banners", label: "橫幅管理", icon: Image },
  { href: "/admin/ads", label: "廣告管理", icon: Megaphone },
  { href: "/admin/members", label: "會員管理", icon: Users },
  { href: "/admin/membership-plans", label: "會員方案", icon: Crown },
];

export function AdminSidebar() {
  return (
    <aside className="w-56 shrink-0 border-r border-border bg-card p-4">
      <Link href="/admin" className="mb-8 block text-lg font-bold">
        <span className="text-gradient-gold">NightWalk</span> 後台
      </Link>
      <nav className="space-y-1">
        {links.map((link) => (
          <Link
            key={link.href}
            href={link.href}
            className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
          >
            <link.icon className="size-4" />
            {link.label}
          </Link>
        ))}
      </nav>
      <form action={logoutAction} className="mt-8">
        <Button type="submit" variant="outline" size="sm" className="w-full">
          <LogOut className="size-4" />
          登出
        </Button>
      </form>
      <Link
        href="/"
        className="mt-4 block text-center text-xs text-muted-foreground hover:text-primary"
      >
        返回前台網站
      </Link>
    </aside>
  );
}