import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Menu, X, Globe } from "lucide-react";
import { useI18n } from "@/i18n/context";
import { localeLabels, type Locale } from "@/i18n/translations";
import type { TranslationKeys } from "@/i18n/translations";

const navLinks: { key: TranslationKeys; href: string }[] = [
  { key: "nav_technology", href: "#technology" },
  { key: "nav_performance", href: "#performance" },
  { key: "nav_pricing", href: "#pricing" },
  { key: "nav_faq", href: "#faq" },
];

const locales: Locale[] = ["en", "ru", "zh"];

export function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [langOpen, setLangOpen] = useState(false);
  const { t, locale, setLocale } = useI18n();

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        scrolled ? "glass-card shadow-lg" : "bg-transparent"
      }`}
    >
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex h-16 items-center justify-between">
          <a href="#" className="flex items-center gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-gekon-green to-gekon-cyan">
              <span className="text-sm font-bold text-primary-foreground">G</span>
            </div>
            <span className="text-xl font-bold tracking-tight text-foreground">
              Gekon
            </span>
          </a>

          <div className="hidden items-center gap-8 md:flex">
            {navLinks.map((link) => (
              <a
                key={link.href}
                href={link.href}
                className="text-sm text-muted-foreground transition-colors hover:text-foreground"
              >
                {t(link.key)}
              </a>
            ))}

            {/* Language switcher */}
            <div className="relative">
              <button
                onClick={() => setLangOpen(!langOpen)}
                className="flex items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground hover:border-gekon-green/30"
              >
                <Globe size={14} />
                {localeLabels[locale]}
              </button>
              {langOpen && (
                <div className="absolute right-0 top-full mt-2 glass-card rounded-lg border border-border py-1 min-w-[120px] shadow-xl">
                  {locales.map((l) => (
                    <button
                      key={l}
                      onClick={() => { setLocale(l); setLangOpen(false); }}
                      className={`block w-full px-4 py-2 text-left text-sm transition-colors hover:bg-secondary ${
                        l === locale ? "text-gekon-green font-medium" : "text-muted-foreground"
                      }`}
                    >
                      {localeLabels[l]}
                    </button>
                  ))}
                </div>
              )}
            </div>

            <Button variant="glow" size="sm">
              {t("nav_get_started")}
            </Button>
          </div>

          <div className="flex items-center gap-2 md:hidden">
            {/* Mobile language */}
            <div className="relative">
              <button
                onClick={() => setLangOpen(!langOpen)}
                className="flex items-center gap-1 rounded-full border border-border px-2 py-1 text-xs text-muted-foreground"
              >
                <Globe size={12} />
                {locale.toUpperCase()}
              </button>
              {langOpen && (
                <div className="absolute right-0 top-full mt-2 glass-card rounded-lg border border-border py-1 min-w-[120px] shadow-xl z-50">
                  {locales.map((l) => (
                    <button
                      key={l}
                      onClick={() => { setLocale(l); setLangOpen(false); }}
                      className={`block w-full px-4 py-2 text-left text-sm transition-colors hover:bg-secondary ${
                        l === locale ? "text-gekon-green font-medium" : "text-muted-foreground"
                      }`}
                    >
                      {localeLabels[l]}
                    </button>
                  ))}
                </div>
              )}
            </div>
            <button
              className="text-foreground"
              onClick={() => setMobileOpen(!mobileOpen)}
            >
              {mobileOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </div>

      {mobileOpen && (
        <div className="glass-card border-t border-border md:hidden">
          <div className="flex flex-col gap-4 px-4 py-6">
            {navLinks.map((link) => (
              <a
                key={link.href}
                href={link.href}
                className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                onClick={() => setMobileOpen(false)}
              >
                {t(link.key)}
              </a>
            ))}
            <Button variant="glow" size="sm" className="w-full">
              {t("nav_get_started")}
            </Button>
          </div>
        </div>
      )}
    </nav>
  );
}