"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";

import { LogOut, User } from "lucide-react";

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";

export default function DashboardTopBar() {
  const router = useRouter();
  const { data: session } = useSession();

  if (!session) return null;

  const handleSignOut = async () => {
    await signOut({
      fetchOptions: {
        onSuccess: () => {
          router.push("/sign-in");
        },
      },
    });
  };

  return (
    <div className="sticky top-0 z-30 border-b border-slate-200 bg-white">
      <div className="flex h-16 items-center justify-between px-6">
        <div className="flex items-center gap-4">
          <h2 className="text-lg font-semibold text-slate-900">
            Bienvenido, {session.user.name?.split(" ")[0]}
          </h2>
        </div>

        <div className="flex items-center gap-4">
          {/* User Info */}
          <div className="hidden text-right md:block">
            <p className="text-sm font-medium text-slate-900">
              {session.user.name}
            </p>
            <p className="text-xs text-slate-500">{session.user.email}</p>
          </div>

          {/* User Menu */}
          <DropdownMenu>
            <DropdownMenuTrigger className="focus:outline-none">
              <Avatar className="h-9 w-9 cursor-pointer ring-2 ring-slate-100 transition-all hover:ring-blue-200">
                <AvatarImage
                  src={session.user.image ?? undefined}
                  alt={session.user.name ?? "Usuario"}
                />
                <AvatarFallback className="bg-blue-500 text-sm font-semibold text-white">
                  {session.user.name
                    ?.split(" ")
                    .map((n) => n[0])
                    .join("")
                    .toUpperCase()
                    .slice(0, 2) ?? "U"}
                </AvatarFallback>
              </Avatar>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56">
              <DropdownMenuLabel>
                <div className="flex flex-col space-y-1">
                  <p className="text-sm font-medium">{session.user.name}</p>
                  <p className="text-xs text-slate-500">{session.user.email}</p>
                </div>
              </DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem asChild className="cursor-pointer">
                <Link href="/dashboard/perfil" className="flex items-center">
                  <User className="mr-2 h-4 w-4" />
                  Mi Perfil
                </Link>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                className="cursor-pointer text-red-600 focus:text-red-600"
                onClick={handleSignOut}
              >
                <LogOut className="mr-2 h-4 w-4" />
                Cerrar Sesión
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </div>
  );
}