import { Link, usePage } from "@inertiajs/react";
import { CircleUserRoundIcon, LogOutIcon, UserIcon } from "lucide-react";

import CustomSidebarTrigger from "@/back/Components/CustomSidebarTrigger";
import AppBreadcrumbs from "@/back/Components/Layout/AppBreadcrumbs";
import AppSettings from "@/back/Components/Layout/Settings/AppSettings";
import type { AuthProp, ConfigBackend } from "@/back/types/global";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import trans from "@/hooks/use-translations";

export default function AppHeader() {
  const { user } = usePage().props.auth as AuthProp;
  const { routes } = usePage().props.configBackend as ConfigBackend;
  return (
    <header className="sticky top-0 flex flex-col justify-between items-center bg-background border-b z-20">
      <div className="sticky top-0 flex flex-row justify-between items-center w-full py-4">
        <div className="flex flex-row justify-start items-center">
          <CustomSidebarTrigger />
          <AppBreadcrumbs className="hidden md:block" />
        </div>
        <div className="flex items-center gap-x-1.5">
          <AppSettings />
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="text-muted-foreground">
                <CircleUserRoundIcon />
                <span className="hidden lg:block">
                  {user.first_name} {user.last_name}
                </span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent side="bottom" className="w-fit me-1">
              <DropdownMenuItem className="p-0">
                <Button variant="ghost" asChild>
                  <Link
                    href={route(`${routes.name}users.show`, user.id)}
                    className="w-full"
                  >
                    <UserIcon />
                    {trans("uwil-backend::back.profile")}
                  </Link>
                </Button>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem className="p-0">
                <Button variant="ghost" asChild>
                  <a href={route(`${routes.name}logout`)} className="w-full">
                    <LogOutIcon />
                    {trans("uwil-backend::back.disconnect")}
                  </a>
                </Button>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
      <AppBreadcrumbs className="block md:hidden mb-4 w-full" />
    </header>
  );
}