import Link from "next/link";
import { UserCircle2 } from "lucide-react";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { LogoutButton } from "@/components/auth/logout-button";
import { Button } from "@/components/ui/button";
import { prisma } from "@/lib/prisma";
import { MobileNavDrawer } from "@/components/layout/mobile-nav-drawer";
import { ThemeToggle } from "@/components/theme/theme-toggle";

export async function Topbar() {
  const session = await getServerSession(authOptions);
  const currentUser = session?.user?.id
    ? await prisma.user.findFirst({
        where: { id: session.user.id, deletedAt: null },
        select: { name: true, role: { select: { name: true } } },
      })
    : null;

  return (
    <header className="flex h-16 items-center justify-between border-b border-border bg-background px-4 text-foreground lg:px-8">
      <div className="flex items-center gap-3">
        <MobileNavDrawer
          userName={currentUser?.name ?? session?.user?.name}
          userRole={currentUser?.role.name ?? session?.user?.role}
        />
        <div>
          <p className="text-sm text-muted-foreground">Viñas Fundo El Bosque</p>
          <p className="text-base font-semibold text-foreground">Gestión de fichas y documentos</p>
        </div>
      </div>
      <div className="flex items-center gap-3">
        <div className="hidden text-right sm:block">
          <p className="text-sm font-medium text-foreground">{currentUser?.name ?? session?.user?.name}</p>
          <p className="text-xs text-muted-foreground">{currentUser?.role.name ?? session?.user?.role}</p>
        </div>
        <ThemeToggle />
        <Button asChild variant="outline" size="sm" className="gap-2">
          <Link href="/perfil">
            <UserCircle2 className="h-4 w-4" />
            <span className="hidden sm:inline">Mi perfil</span>
          </Link>
        </Button>
        <LogoutButton />
      </div>
    </header>
  );
}