import { Link, NavLink } from "react-router-dom";
import { useTheme } from "../../hooks/useTheme";
import { useTranslation } from "react-i18next";
import React from "react";

export function Header() {
  const { theme, toggle } = useTheme();
  const isDark = theme === "dark";
  const { i18n, t } = useTranslation("comp:header");
  const [open, setOpen] = React.useState(false);

  const changeLanguage = (lng: string) => i18n.changeLanguage(lng);

  return (
    <header className="sticky top-0 z-50 border-b bg-white/70 backdrop-blur dark:bg-neutral-900/70 dark:border-neutral-800">
      <div className="mx-auto max-w-6xl px-4">
        {/* Top bar */}
        <div className="flex items-center justify-between py-3 md:grid md:grid-cols-3">
          {/* Left: brand */}
          <Link
            to="/"
            className="flex items-center gap-2 text-xl font-semibold tracking-tight hover:opacity-90"
          >
            <img
              src="logo.png"
              alt="Little smiling brain surrounded by three dots and curly braces"
              className="h-9 w-9"
            />
            <p className="sm:inline">{t("app_name")}</p>
          </Link>

          {/* Center: nav (desktop only) */}
          <nav className="hidden md:flex items-center justify-center gap-6">
            <NavLink
              to="/"
              className={({ isActive }) =>
                `text-sm ${isActive ? "font-semibold underline" : "opacity-80 hover:opacity-100"}`
              }
            >
              {t("nav.home", "Home")}
            </NavLink>
            {/* Add more pages here */}
            {/* <NavLink to="/about" ...>About</NavLink> */}
          </nav>

          {/* Right: controls */}
          <div className="flex items-center justify-end gap-2">
            {/* Desktop controls */}
            <div className="hidden md:flex items-center gap-2">
              <button
                type="button"
                onClick={toggle}
                aria-label="Toggle dark mode"
                className="rounded-lg border px-3 py-1 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:border-neutral-700 border-neutral-200"
                title={isDark ? "Switch to light mode" : "Switch to dark mode"}
              >
                {isDark ? "☀️ Light" : "🌙 Dark"}
              </button>
              <button
                onClick={() => changeLanguage("en")}
                className="rounded px-2 py-1 text-sm ring-1 ring-black/10 hover:bg-black/5"
              >
                EN
              </button>
              <button
                onClick={() => changeLanguage("de")}
                className="rounded px-2 py-1 text-sm ring-1 ring-black/10 hover:bg-black/5"
              >
                DE
              </button>
            </div>

            {/* Mobile: hamburger */}
            <button
              className="md:hidden inline-flex items-center justify-center rounded-md p-2 ring-1 ring-black/10 hover:bg-black/5"
              aria-label="Open menu"
              aria-expanded={open}
              onClick={() => setOpen((v) => !v)}
            >
              {/* simple icon */}
              <span className="i-[menu]">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                  <path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                </svg>
              </span>
            </button>
          </div>
        </div>

        {/* Mobile panel */}
        {open && (
          <div className="md:hidden pb-3 border-t border-neutral-200 dark:border-neutral-800">
            <nav className="flex flex-col gap-1 pt-3">
              <NavLink
                to="/"
                onClick={() => setOpen(false)}
                className={({ isActive }) =>
                  `px-2 py-2 rounded ${isActive ? "font-semibold underline" : "opacity-90 hover:opacity-100"}`
                }
              >
                {t("nav.home", "Home")}
              </NavLink>
              {/* More mobile links… */}

              <div className="mt-2 flex items-center gap-2">
                <button
                  type="button"
                  onClick={() => {
                    toggle();
                    setOpen(false);
                  }}
                  className="flex-1 rounded-lg border px-3 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:border-neutral-700 border-neutral-200"
                >
                  {isDark ? "☀️ Light" : "🌙 Dark"}
                </button>
                <button
                  onClick={() => {
                    changeLanguage("en");
                    setOpen(false);
                  }}
                  className="rounded px-3 py-2 text-sm ring-1 ring-black/10 hover:bg-black/5"
                >
                  EN
                </button>
                <button
                  onClick={() => {
                    changeLanguage("de");
                    setOpen(false);
                  }}
                  className="rounded px-3 py-2 text-sm ring-1 ring-black/10 hover:bg-black/5"
                >
                  DE
                </button>
              </div>
            </nav>
          </div>
        )}
      </div>
    </header>
  );
}
