"use client";
import {
  ChevronDownIcon,
  LogOutIcon,
  UserRoundIcon,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";

import { AdminLanguageSwitcher } from "@/components/admin/admin-language-switcher";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  useAdminProfile,
  useAdminSessionStore,
} from "@/stores/admin-session";
import { clearAdminSessionCookie } from "@/lib/admin-http";

export function ShellToolbar() {
  const { t } = useTranslation("common");
  const router = useRouter();
  const adminProfile = useAdminProfile();
  const clearSession = useAdminSessionStore((s) => s.clearSession);

  const displayName =
    adminProfile?.nickname?.trim() ||
    adminProfile?.username?.trim() ||
    t("toolbar.defaultAdmin");

  function onLogout() {
    void clearAdminSessionCookie();
    clearSession();
    toast.success(t("toolbar.loggedOut"));
    router.replace("/admin/login");
    router.refresh();
  }

  return (
    <div className="flex items-center gap-2 sm:gap-3">
      <AdminLanguageSwitcher />

      <DropdownMenu>
        <DropdownMenuTrigger className="flex max-w-[min(100vw-8rem,14rem)] items-center gap-2 rounded-lg px-2 py-1.5 text-left outline-none hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-ring sm:max-w-[16rem]">
          <span className="min-w-0 flex-1 truncate text-sm font-semibold leading-tight">
            {displayName}
          </span>
          <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground" />
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="min-w-[12rem]">
          <DropdownMenuGroup>
            <DropdownMenuLabel className="font-normal">
              <div className="flex flex-col gap-0.5">
                <span className="text-sm font-medium">{displayName}</span>
                <span className="text-xs text-muted-foreground">
                  @{adminProfile?.username ?? "—"}
                </span>
              </div>
            </DropdownMenuLabel>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem
              className="flex cursor-pointer items-center gap-2"
              onClick={() => router.push("/admin/account")}
            >
              <UserRoundIcon className="size-4" />
              {t("toolbar.accountSettings")}
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem
              variant="destructive"
              className="gap-2"
              onClick={onLogout}
            >
              <LogOutIcon />
              {t("actions.logout")}
            </DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}
