import React, { useEffect, useState } from "react";
import { Link, NavLink, useLocation } from "react-router-dom";
import { MenuIcon, PhoneIcon, XIcon } from "lucide-react";
import { useSite } from "../api";
import { useLang } from "../i18n/lang";
import { useFieldSaver } from "../admin/AdminContext";
import { InlineEdit } from "./admin/InlineEdit";
import { EditableItem, SingletonPill } from "../admin/Editable";
import { LangToggle } from "./LangToggle";

export function Header() {
  const { brand, nav } = useSite();
  const { t, href } = useLang();
  const save = useFieldSaver();

  const saveNav = (id: number, changes: Record<string, unknown>) =>
    save("nav", id, changes, (d) => {
      const item = d.nav.find((n) => n.id === id);
      if (item) Object.assign(item, changes);
    });
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const { pathname } = useLocation();

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  });
  useEffect(() => {
    setOpen(false);
  }, [pathname]);

  return (
    <header
      className={`fixed inset-x-0 top-0 z-50 transition-all duration-300 ease-lux ${
        scrolled
          ? "border-b border-white/10 bg-ink/80 backdrop-blur-xl shadow-[0_10px_30px_rgba(0,0,0,0.5)]"
          : "border-b border-transparent bg-transparent"
      }`}
    >
      <div className="mx-auto flex max-w-site items-center justify-between gap-8 px-6 py-4 lg:px-10">
        <div className="relative flex items-center">
          <Link
            to={href("/")}
            className="flex items-center gap-3"
            aria-label={brand.name}
          >
            <img
              src={brand.logo}
              alt={brand.name}
              className={`w-auto object-contain transition-[height] duration-300 ease-lux ${
                scrolled ? "h-14" : "h-20"
              }`}
            />
          </Link>
          <SingletonPill resource="brand" label="ویرایش برند و لوگو" className="absolute top-1/2 -translate-y-1/2 ltr:-right-10 rtl:-left-10" />
        </div>

        <nav aria-label={t("mainNav")} className="hidden xl:block">
          <ul className="flex items-center gap-7">
            {nav.map((item) => (
              <EditableItem key={item.id} resource="nav" item={item}>
                <li>
                  <NavLink
                    to={href(item.href)}
                    className={({ isActive }) =>
                      `group relative py-2 text-[0.95rem] font-light transition-colors duration-200 ease-lux hover:text-copper [text-shadow:_0_2px_4px_rgba(0,0,0,0.6)] ${
                        isActive ? "text-copper font-normal" : "text-ivory/80"
                      }`
                    }
                  >
                    {({ isActive }) => (
                      <>
                        <InlineEdit
                          value={item.label}
                          onSave={(v) => saveNav(item.id, { label: v })}
                        />
                        <span
                          className={`absolute -bottom-0.5 left-0 right-0 h-0.5 w-full origin-center rounded-full bg-copper transition-transform duration-300 ease-lux ${
                            isActive
                              ? "scale-x-100 shadow-[0_0_8px_rgba(197,143,92,0.8)]"
                              : "scale-x-0 group-hover:scale-x-100"
                          }`}
                        />
                      </>
                    )}
                  </NavLink>
                </li>
              </EditableItem>
            ))}
          </ul>
        </nav>

        <div className="flex items-center gap-3">
          {/* دکمه تماس کپسولی شیشه‌ای لوکس */}
          <a
            href={brand.phone_href}
            className="group relative hidden items-center gap-3 rounded-full border border-copper/40 bg-white/[0.04] px-5 py-2 text-sm font-medium text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_4px_20px_rgba(0,0,0,0.3)] transition-all duration-300 ease-lux hover:border-copper hover:bg-copper/10 hover:shadow-[0_0_25px_rgba(197,143,92,0.35)] active:scale-95 lg:flex"
          >
            <span className="flex h-7 w-7 items-center justify-center rounded-full bg-copper/20 text-copper transition-all duration-300 group-hover:bg-copper group-hover:text-char">
              <PhoneIcon className="h-3.5 w-3.5 transition-transform duration-300 group-hover:rotate-12" />
            </span>
            <span dir="ltr" className="tracking-wide">{brand.phone}</span>
          </a>

          {/* تغییر زبان — فارسی/انگلیسی */}
          <LangToggle />

          {/* دکمه منوی موبایل دایره‌ای شیشه‌ای */}
          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            className="flex h-11 w-11 items-center justify-center rounded-full border border-white/15 bg-white/5 text-ivory backdrop-blur-lg shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] transition-all duration-300 ease-lux hover:border-copper/60 hover:bg-white/10 hover:text-copper active:scale-95 xl:hidden"
            aria-label={open ? t("closeMenu") : t("openMenu")}
            aria-expanded={open}
          >
            {open ? (
              <XIcon className="h-5 w-5" />
            ) : (
              <MenuIcon className="h-5 w-5" />
            )}
          </button>
        </div>
      </div>

      {open && (
        <nav
          aria-label={t("mobileNav")}
          className="border-t border-white/10 bg-ink/95 backdrop-blur-2xl px-6 py-4 xl:hidden shadow-2xl"
        >
          <ul className="grid gap-1">
            {nav.map((item) => (
              <EditableItem key={item.id} resource="nav" item={item}>
                <li>
                  <NavLink
                    to={href(item.href)}
                    className={({ isActive }) =>
                      `block border-b border-ivory/5 py-3 text-base font-light transition-colors duration-200 ease-lux ${
                        isActive ? "text-copper" : "text-ivory/80"
                      }`
                    }
                  >
                    <InlineEdit
                      value={item.label}
                      onSave={(v) => saveNav(item.id, { label: v })}
                    />
                  </NavLink>
                </li>
              </EditableItem>
            ))}
          </ul>
        </nav>
      )}
    </header>
  );
}