"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Menu, Bell, User, LogOut, Settings as SettingsIcon } from "lucide-react";
import { LanguageSwitcher } from "@/components/shared/language-switcher";
import { useTranslations, useLocale } from "@/lib/i18n/i18n-provider";
import { createClient } from "@/lib/supabase/client";
import type { Locale } from "@/lib/i18n/config";

export function Topbar({
  title,
  firstName,
  unreadCount = 0,
  onOpenMobileNav
}: {
  title: string;
  firstName?: string | null;
  unreadCount?: number;
  onOpenMobileNav: () => void;
}) {
  const [profileOpen, setProfileOpen] = useState(false);
  const t = useTranslations();
  const locale = useLocale();
  const router = useRouter();

  async function handleLogout() {
    const supabase = createClient();
    await supabase.auth.signOut();
    router.push(`/${locale}/login`);
    router.refresh();
  }

  return (
    <header className="flex h-16 items-center justify-between border-b border-ink-100 bg-white px-4 md:px-6">
      <div className="flex items-center gap-3">
        <button
          onClick={onOpenMobileNav}
          className="rounded-lg p-1.5 text-ink-500 hover:bg-ink-100 md:hidden"
          aria-label="Open menu"
        >
          <Menu className="h-5 w-5" />
        </button>
        <h1 className="text-lg font-semibold text-ink-900">{title}</h1>
      </div>

      <div className="flex items-center gap-1.5">
        <button
          className="relative rounded-xl p-2 text-ink-500 hover:bg-ink-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
          aria-label="Notifications"
        >
          <Bell className="h-4.5 w-4.5" />
          {unreadCount > 0 && (
            <span className="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-brand-600" />
          )}
        </button>

        <LanguageSwitcher currentLocale={locale as Locale} isAuthenticated />

        <div className="relative">
          <button
            onClick={() => setProfileOpen((o) => !o)}
            className="flex h-9 w-9 items-center justify-center rounded-full bg-ink-100 text-ink-600 hover:bg-ink-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
            aria-haspopup="menu"
            aria-expanded={profileOpen}
            aria-label="Profile menu"
          >
            <User className="h-4 w-4" />
          </button>
          {profileOpen && (
            <ul
              role="menu"
              className="absolute right-0 z-20 mt-1 w-48 overflow-hidden rounded-xl border border-ink-100 bg-white py-1 shadow-card"
            >
              {firstName && (
                <li className="px-3 py-2 text-xs text-ink-400">{firstName}</li>
              )}
              <li>
                <a
                  href={`/${locale}/settings`}
                  role="menuitem"
                  className="flex items-center gap-2 px-3 py-2 text-sm text-ink-700 hover:bg-ink-50"
                >
                  <SettingsIcon className="h-4 w-4" /> {t("nav.settings")}
                </a>
              </li>
              <li>
                <button
                  role="menuitem"
                  onClick={handleLogout}
                  className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50"
                >
                  <LogOut className="h-4 w-4" /> {t("nav.logout")}
                </button>
              </li>
            </ul>
          )}
        </div>
      </div>
    </header>
  );
}