import { Button } from "@/components/ui/button";
import { useLanguage } from "@/contexts/LanguageContext";
import { useAuth } from "@/hooks/useAuth";
import { Link } from "react-router-dom";
import { Settings, BookOpen } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuLabel,
} from "@/components/ui/dropdown-menu";
import LanguageSelector from "@/components/ui/language-selector";
import OrgSwitcher from "@/components/layout/OrgSwitcher";

const NavBar = () => {
  const { user, logout, loginRequired } = useAuth();
  const { t } = useLanguage();

  const handleLogout = async () => {
    await logout();
  };

  return (
    <header className="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-b">
      <nav className="w-full flex items-center justify-between h-16 px-6">
        <Link to="/" className="flex items-center gap-2 font-semibold tracking-tight" aria-label="Data Talks">
          <span role="img" aria-label="Logo Data Talks" className="text-xl leading-none">🦜</span>
          <span className="hidden sm:inline">Data Talks</span>
        </Link>

        <div className="flex items-center gap-4 ml-auto">
          <Link
            to="/flows"
            className="flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
          >
            <BookOpen className="h-4 w-4" />
            <span className="hidden sm:inline">{t('nav.documentation')}</span>
          </Link>
          <OrgSwitcher />
          <LanguageSelector />
          {user ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" data-walkthrough="nav-settings-btn">
                  <Settings className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56">
                <DropdownMenuLabel>{t('settings.title')}</DropdownMenuLabel>
                <DropdownMenuSeparator />
                
                <DropdownMenuItem asChild>
                  <Link to="/account" className="cursor-pointer">
                    {t('settings.subscription')}
                  </Link>
                </DropdownMenuItem>
                {loginRequired && (
                  <>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem onClick={handleLogout}>
                      {t('nav.logout')}
                    </DropdownMenuItem>
                  </>
                )}
              </DropdownMenuContent>
            </DropdownMenu>
          ) : null}
        </div>
      </nav>
    </header>
  );
};

export default NavBar;
