"use client";

import { useRouter } from "next/navigation";

import { AuthSignIn, DashboardAdmin, Home } from "@/routes";

import Logo from "@/components/custom/logo";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

import { signOut, useSession } from "@/lib/auth/auth-client";

import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { Button } from "../ui/button";

export default function Header() {
  const router = useRouter();
  const { data: session } = useSession();
  return (
    <div className="sticky top-0 z-50 bg-white/75 shadow-sm backdrop-blur-sm">
      <div className="container mx-auto flex h-12 items-center justify-between">
        <Home.Link>
          <Logo />
        </Home.Link>
        <div className="flex items-center space-x-3">
          {session ? (
            <>
              <DropdownMenu>
                <DropdownMenuTrigger>
                  <Avatar>
                    <AvatarImage
                      src={session.user.image ?? undefined}
                      alt={session.user.name ?? "Usuario"}
                    />
                    <AvatarFallback>
                      {session.user.name
                        ?.split(" ")
                        .map((n) => n[0])
                        .join("")
                        .toUpperCase()
                        .slice(0, 2) ?? "U"}
                    </AvatarFallback>
                  </Avatar>
                </DropdownMenuTrigger>
                <DropdownMenuContent>
                  <DropdownMenuLabel>{session.user.name}</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem className="cursor-pointer">
                    <DashboardAdmin.Link>
                      Panel de administración
                    </DashboardAdmin.Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    className="cursor-pointer"
                    onClick={() =>
                      signOut({
                        fetchOptions: {
                          onSuccess: () => router.push(Home()),
                        },
                      })
                    }
                  >
                    Cerrar sesión
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </>
          ) : (
            <>
              <AuthSignIn.Link>
                <Button variant={"outline"}>Iniciar sesión</Button>
              </AuthSignIn.Link>
            </>
          )}
        </div>
      </div>
    </div>
  );
}