"use client";

import { signOut } from "next-auth/react";
import { LogOut, Menu, Search, User } from "lucide-react";
import { BrandLogo } from "@/components/brand/brand-logo";
import { NotificationBell } from "@/components/notifications/notification-bell";
import { LanguageToggle } from "@/components/layout/language-toggle";
import { ThemeToggle } from "@/components/layout/theme-toggle";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useLocale } from "@/components/providers/locale-provider";
import { cn } from "@/lib/utils";

interface TopbarProps {
  userName?: string | null;
  userEmail?: string | null;
  userRole?: string;
  onMenuClick?: () => void;
}

export function Topbar({
  userName,
  userEmail,
  userRole,
  onMenuClick,
}: TopbarProps) {
  const { t, dir } = useLocale();

  return (
    <header className="sticky top-0 z-30 flex h-[var(--topbar-height)] items-center gap-3 border-b border-border bg-card/90 px-4 backdrop-blur-md md:gap-4 md:px-6">
      <Button
        type="button"
        variant="outline"
        size="icon"
        className="shrink-0 lg:hidden"
        onClick={onMenuClick}
      >
        <Menu className="h-5 w-5" />
      </Button>

      <LinkLogo className="shrink-0 lg:hidden" />

      <div className="relative hidden min-w-0 flex-1 md:block md:max-w-lg">
        <Search
          className={cn(
            "absolute top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground",
            dir === "rtl" ? "right-3" : "left-3"
          )}
        />
        <Input
          placeholder={t.search}
          disabled
          className={cn(
            "h-10 border-border/80 bg-muted/40",
            dir === "rtl" ? "pr-10" : "pl-10"
          )}
        />
      </div>

      <div className="ms-auto flex items-center gap-1.5 sm:gap-2">
        <NotificationBell />
        <LanguageToggle />
        <ThemeToggle />
        <div className="hidden h-8 w-px bg-border sm:block" />
        <div className="hidden items-center gap-2 sm:flex">
          <div className="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-primary to-accent text-primary-foreground">
            <User className="h-4 w-4" />
          </div>
          <div className="max-w-[140px] text-start">
            <p className="truncate text-sm font-semibold leading-tight">
              {userName ?? "—"}
            </p>
            {userRole ? (
              <p className="truncate text-[10px] text-muted-foreground">{userRole}</p>
            ) : userEmail ? (
              <p className="truncate text-[10px] text-muted-foreground">{userEmail}</p>
            ) : null}
          </div>
        </div>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          className="hidden gap-1.5 sm:inline-flex"
          onClick={() => signOut({ callbackUrl: "/login" })}
        >
          <LogOut className="h-4 w-4" />
          <span className="hidden md:inline">{t.logout}</span>
        </Button>
      </div>
    </header>
  );
}

function LinkLogo({ className }: { className?: string }) {
  return (
    <BrandLogo
      width={120}
      height={40}
      imageClassName={cn("h-8 w-[100px] min-w-[100px] sm:h-9 sm:w-[120px]", className)}
    />
  );
}