import { Link } from "@tanstack/react-router";
import { ChevronDown, FlaskConical } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

const groups: { label: string; items: { to: string; label: string }[] }[] = [
  {
    label: "Public",
    items: [
      { to: "/", label: "Landing / Upload" },
      { to: "/about", label: "About" },
      { to: "/docs", label: "Docs" },
      { to: "/login", label: "Login" },
      { to: "/register", label: "Register" },
      { to: "/d/a1b2c3", label: "Download page" },
    ],
  },
  {
    label: "User",
    items: [
      { to: "/app/dashboard", label: "Dashboard" },
      { to: "/app/files", label: "My files" },
      { to: "/app/shared", label: "Shared links" },
      { to: "/app/settings", label: "Settings" },
    ],
  },
  {
    label: "Admin",
    items: [
      { to: "/admin/overview", label: "Overview" },
      { to: "/admin/files", label: "Files" },
      { to: "/admin/users", label: "Users" },
      { to: "/admin/storage", label: "Storage" },
      { to: "/admin/logs", label: "Logs" },
      { to: "/admin/settings", label: "Settings" },
    ],
  },
];

export function MockupNav() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm" className="gap-2">
          <FlaskConical className="h-4 w-4" />
          Mockup pages
          <ChevronDown className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-56">
        {groups.map((g, i) => (
          <div key={g.label}>
            {i > 0 && <DropdownMenuSeparator />}
            <DropdownMenuLabel>{g.label}</DropdownMenuLabel>
            {g.items.map((it) => (
              <DropdownMenuItem key={it.to} asChild>
                <Link to={it.to}>{it.label}</Link>
              </DropdownMenuItem>
            ))}
          </div>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}