"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { CheckIcon, ChevronsUpDownIcon, GlobeIcon, PlusIcon } from "lucide-react";
import { siteIdFromPathname } from "@/lib/active-site";
import { cn } from "@/lib/utils";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar";

// `displayDomain` est calculé côté serveur : `formatDomain` s'appuie sur `node:url`,
// il n'a pas sa place dans un composant client.
export type SwitcherSite = { id: string; name: string; displayDomain: string };

export function SiteSwitcher({ sites }: { sites: SwitcherSite[] }) {
  const { isMobile } = useSidebar();
  const pathname = usePathname();
  const activeSite = sites.find((site) => site.id === siteIdFromPathname(pathname)) ?? null;

  if (sites.length === 0) {
    return (
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton
            size="lg"
            tooltip="Ajouter un site"
            render={<Link href="/settings/sites/new" />}
          >
            <div className="flex aspect-square size-8 items-center justify-center rounded-lg border border-dashed">
              <PlusIcon className="size-4" />
            </div>
            <div className="grid flex-1 text-left text-sm leading-tight">
              <span className="truncate font-medium">Ajouter un site</span>
              <span className="truncate text-xs">Aucun site</span>
            </div>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    );
  }

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger
            render={
              <SidebarMenuButton
                size="lg"
                tooltip={activeSite?.name ?? "Choisir un site"}
                className="aria-expanded:bg-muted"
              />
            }
          >
            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
              <GlobeIcon className="size-4" />
            </div>
            <div className="grid flex-1 text-left text-sm leading-tight">
              <span className="truncate font-medium">{activeSite?.name ?? "Choisir un site"}</span>
              <span className="truncate text-xs">{activeSite?.displayDomain ?? "Sites"}</span>
            </div>
            <ChevronsUpDownIcon className="ml-auto size-4" />
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-fit min-w-56"
            side={isMobile ? "bottom" : "right"}
            align="start"
            sideOffset={4}
          >
            <DropdownMenuGroup>
              <DropdownMenuLabel>Sites</DropdownMenuLabel>
              {sites.map((site) => {
                const isActive = site.id === activeSite?.id;
                return (
                  <DropdownMenuItem
                    key={site.id}
                    aria-current={isActive ? "page" : undefined}
                    className="gap-2 p-2"
                    render={<Link href={`/settings/sites/${site.id}`} />}
                  >
                    <div className="flex size-6 items-center justify-center rounded-md border">
                      <GlobeIcon className="size-3.5" />
                    </div>
                    <span className="truncate">{site.name}</span>
                    <CheckIcon className={cn("ml-auto", !isActive && "invisible")} />
                  </DropdownMenuItem>
                );
              })}
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="gap-2 p-2" render={<Link href="/settings/sites/new" />}>
              <div className="flex size-6 items-center justify-center rounded-md border border-dashed">
                <PlusIcon className="size-3.5" />
              </div>
              <span className="font-medium text-muted-foreground">Ajouter un site</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}