import { LogOut, Menu, Moon, Sun, User } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";
import { Breadcrumb } from "./Breadcrumb";
import { LanguageSelector } from "@/components/shared/LanguageSelector";
import { useAuthStore } from "@/stores/auth";
import { useUiStore } from "@/stores/ui";
import { mockMode } from "@/api/mock";

export function Header() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { userId, logout } = useAuthStore();
  const { theme, toggleTheme, toggleMobileSidebar } = useUiStore();
  return (
    <header className="glass sticky top-0 z-30 flex h-16 items-center justify-between px-4 md:px-6">
      <div className="flex items-center gap-3">
        <Button className="md:hidden" variant="ghost" size="icon" onClick={toggleMobileSidebar} aria-label="Open navigation">
          <Menu className="h-4 w-4" />
        </Button>
        <Breadcrumb />
      </div>
      <div className="flex items-center gap-3">
        {mockMode ? (
          <div className="hidden items-center gap-2 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-200 sm:flex">
            {t("auth.mockData")}
          </div>
        ) : null}
        <div className="hidden items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground sm:flex">
          <span className="h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_10px_rgba(16,185,129,0.8)]" />
          {t("auth.gateway")}
        </div>
        <div className="hidden items-center gap-2 text-sm text-muted-foreground sm:flex">
          <User className="h-4 w-4" />
          <span>{userId || "user"}</span>
        </div>
        <Button
          variant="ghost"
          size="icon"
          onClick={toggleTheme}
          aria-label={theme === "dark" ? t("theme.switchToLight") : t("theme.switchToDark")}
        >
          {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
        </Button>
        <LanguageSelector />
        <Button
          variant="ghost"
          size="icon"
          onClick={() => {
            logout();
            navigate("/login", { replace: true });
          }}
          aria-label={t("auth.logout")}
        >
          <LogOut className="h-4 w-4" />
        </Button>
      </div>
    </header>
  );
}