"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import Image from "next/image";
import { cn } from "@/lib/cn";
import { useConfigDoc } from "@/hooks/useConfigDoc";
import { COLLECTIONS, CONFIG_DOCS } from "@/lib/firestore-paths";
import { defaultSettings } from "@/lib/defaults";
import type { SiteSettings } from "@/types/models";
import { Menu, X } from "lucide-react";
import { publicImageSrc } from "@/lib/public-image";

const baseLinks = [
  { href: "/", label: "Ana Sayfa" },
  { href: "/hakkimda", label: "Hakkımda" },
  { href: "/ekibimiz", label: "Ekibimiz" },
  { href: "/uzmanlik-alanlari", label: "Uzmanlık Alanları" },
  { href: "/blog", label: "Blog" },
  { href: "/bizi-degerlendirin", label: "Bizi değerlendirin" },
] as const;

export function Navbar() {
  const pathname = usePathname();
  const { data: settings } = useConfigDoc<SiteSettings>(
    COLLECTIONS.config,
    CONFIG_DOCS.settings,
    defaultSettings
  );
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  const showKayit = settings.allowPublicRegistration !== false;
  const links = [
    ...baseLinks.map((l) => ({ ...l })),
    ...(showKayit ? [{ href: "/kayit", label: "Kayıt ol" }] : []),
    { href: "/iletisim", label: "İletişim" },
  ];

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

  useEffect(() => {
    setOpen(false);
  }, [pathname]);

  return (
    <header
      className={cn(
        "sticky top-0 z-50 transition-all duration-300",
        scrolled
          ? "border-b border-white/40 bg-white/75 shadow-sm backdrop-blur-xl"
          : "border-b border-transparent bg-transparent"
      )}
    >
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3 sm:px-6 lg:px-8">
        <Link href="/" className="flex items-center gap-3">
          {settings.logoUrl ? (
            <Image
              src={publicImageSrc(settings.logoUrl)}
              alt={settings.siteTitle}
              width={240}
              height={240}
              className="h-12 w-auto object-contain sm:h-14 md:h-16"
              unoptimized
            />
          ) : (
            <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-[var(--navy)] text-sm font-semibold text-[var(--gold)] sm:h-14 sm:w-14 md:h-16 md:w-16">
              AV
            </div>
          )}
          <div className="leading-tight">
            <p className="font-[family-name:var(--font-display)] text-lg font-medium text-[var(--navy)]">
              {settings.siteTitle}
            </p>
            <p className="text-[10px] font-medium uppercase tracking-[0.18em] text-[var(--muted)]">
              Avukatlık
            </p>
          </div>
        </Link>

        <nav className="hidden items-center gap-1 md:flex">
          {links.map((l) => {
            const active =
              l.href === "/"
                ? pathname === "/"
                : pathname.startsWith(l.href);
            return (
              <Link
                key={l.href}
                href={l.href}
                className={cn(
                  "relative rounded-full px-3 py-2 text-sm font-medium transition-colors",
                  active ? "text-[var(--navy)]" : "text-[var(--muted)] hover:text-[var(--navy)]"
                )}
              >
                {active ? (
                  <motion.span
                    layoutId="nav-pill"
                    className="absolute inset-0 -z-10 rounded-full bg-[#f0f2f7]"
                    transition={{ type: "spring", stiffness: 380, damping: 30 }}
                  />
                ) : null}
                <span className="relative z-10">{l.label}</span>
              </Link>
            );
          })}
        </nav>

        <button
          type="button"
          className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-black/5 bg-white/80 text-[var(--navy)] shadow-sm md:hidden"
          aria-label="Menü"
          onClick={() => setOpen((v) => !v)}
        >
          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </button>
      </div>

      {open ? (
        <div className="border-t border-black/5 bg-white/95 px-4 py-4 shadow-inner backdrop-blur-xl md:hidden">
          <div className="flex flex-col gap-1">
            {links.map((l) => (
              <Link
                key={l.href}
                href={l.href}
                className="rounded-xl px-3 py-2 text-sm font-medium text-[var(--navy)] hover:bg-[#f3f4f8]"
              >
                {l.label}
              </Link>
            ))}
          </div>
        </div>
      ) : null}
    </header>
  );
}