"use client";

import { LanguageSwitcher } from "@/components/LanguageSwitcher";
import { useLocale, useT } from "@/components/LocaleProvider";
import { motion, useScroll, useTransform } from "framer-motion";
import Image from "next/image";
import { useState, useEffect, useMemo } from "react";

export function Nav() {
  const t = useT();
  const locale = useLocale();
  const prefix = `/${locale}`;

  const links = useMemo(
    () => [
      { label: t("nav.features"), href: `${prefix}#features` },
      { label: t("nav.trainers"), href: `${prefix}#trainers` },
      { label: t("nav.app"), href: `${prefix}#app` },
      { label: t("nav.reviews"), href: `${prefix}#reviews` },
    ],
    [t, prefix],
  );

  const { scrollY } = useScroll();
  const blur = useTransform(scrollY, [0, 100], [0, 24]);
  const bg = useTransform(
    scrollY,
    [0, 100],
    ["rgba(5,5,5,0)", "rgba(5,5,5,0.7)"],
  );
  const borderOpacity = useTransform(scrollY, [0, 100], [0, 1]);
  const borderColor = useTransform(
    borderOpacity,
    (o) => `rgba(255,255,255,${0.08 * o})`,
  );
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    if (mobileOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [mobileOpen]);

  return (
    <>
      <motion.header
        className="fixed top-0 left-0 right-0 z-50"
        style={{
          backdropFilter: blur.get() ? `blur(${blur.get()}px)` : undefined,
        }}
      >
        <motion.div
          className="absolute inset-0 border-b"
          style={{
            background: bg,
            backdropFilter: "blur(24px) saturate(180%)",
            borderColor,
          }}
        />
        <nav className="relative mx-auto flex h-16 max-w-7xl items-center justify-between gap-3 px-6 md:h-20 md:px-10">
          <a
            href={`${prefix}#top`}
            className="group flex items-center gap-2.5"
            aria-label={t("nav.homeAria")}
          >
            <Image
              src="/kiimra-logo.png"
              alt=""
              width={32}
              height={32}
              className="h-8 w-8 transition-transform duration-500 group-hover:rotate-[10deg]"
              priority
            />
            <span className="text-[15px] font-medium tracking-wide">Kiimra</span>
          </a>

          <ul className="hidden items-center gap-1 md:flex">
            {links.map((l) => (
              <li key={l.href}>
                <a
                  href={l.href}
                  className="relative rounded-full px-4 py-2 text-sm text-muted transition-colors duration-300 hover:text-foreground"
                >
                  {l.label}
                </a>
              </li>
            ))}
          </ul>

          <div className="flex items-center gap-2 md:gap-3">
            <LanguageSwitcher />
            <button
              type="button"
              aria-label={t("nav.toggleMenu")}
              aria-expanded={mobileOpen}
              onClick={() => setMobileOpen((v) => !v)}
              className="flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 md:hidden"
            >
              <span className="relative flex h-3 w-4 flex-col justify-between">
                <span
                  className={`block h-[1.5px] w-full bg-white transition-transform duration-300 ${
                    mobileOpen ? "translate-y-[5px] rotate-45" : ""
                  }`}
                />
                <span
                  className={`block h-[1.5px] w-full bg-white transition-transform duration-300 ${
                    mobileOpen ? "-translate-y-[5px] -rotate-45" : ""
                  }`}
                />
              </span>
            </button>
          </div>
        </nav>
      </motion.header>

      <motion.div
        className="fixed inset-0 z-40 md:hidden"
        initial={false}
        animate={{
          opacity: mobileOpen ? 1 : 0,
          pointerEvents: mobileOpen ? "auto" : "none",
        }}
        transition={{ duration: 0.3 }}
      >
        <div className="absolute inset-0 bg-black/80 backdrop-blur-xl" />
        <div className="relative flex h-full flex-col items-center justify-center gap-6 px-8 pt-16">
          {links.map((l, i) => (
            <motion.a
              key={l.href}
              href={l.href}
              onClick={() => setMobileOpen(false)}
              initial={{ opacity: 0, y: 20 }}
              animate={{
                opacity: mobileOpen ? 1 : 0,
                y: mobileOpen ? 0 : 20,
              }}
              transition={{ delay: mobileOpen ? i * 0.05 + 0.1 : 0, duration: 0.4 }}
              className="text-3xl font-light tracking-tight"
            >
              {l.label}
            </motion.a>
          ))}
          <motion.a
            href={`${prefix}#early-access`}
            onClick={() => setMobileOpen(false)}
            initial={{ opacity: 0, y: 20 }}
            animate={{
              opacity: mobileOpen ? 1 : 0,
              y: mobileOpen ? 0 : 20,
            }}
            transition={{ delay: mobileOpen ? 0.3 : 0, duration: 0.4 }}
            className="mt-4 rounded-full bg-white px-8 py-4 text-base font-medium text-black"
          >
            {t("nav.getEarlyAccess")}
          </motion.a>
        </div>
      </motion.div>
    </>
  );
}