"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { usePublicCopy } from "@/lib/cms/use-public-copy";
import { InlineText } from "@/components/cms/LandingInlineEditor";

type User = {
  email: string;
  nickname: string;
  role: string;
};

export default function SiteHeader() {
  const copy = usePublicCopy();
  const pathname = usePathname();
  const [user, setUser] = useState<User | null>(null);
  const [ready, setReady] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const searchParams = useSearchParams();
  const landingEditorPreview =
    pathname === "/" && searchParams.get("landingEditor") === "1";
  const router = useRouter();

  useEffect(() => {
    let active = true;
    fetch("/api/auth/me", { cache: "no-store" })
      .then((response) => response.json())
      .then((data) => {
        if (active) setUser(data.success ? data.user : null);
      })
      .catch(() => {
        if (active) setUser(null);
      })
      .finally(() => {
        if (active) setReady(true);
      });

    return () => {
      active = false;
    };
  }, []);

  async function logout() {
    const response = await fetch("/api/auth/logout", { method: "POST" });

    if (response.ok) {
      setUser(null);
      setMenuOpen(false);
      router.replace("/");
      router.refresh();
    }
  }

  const role = user?.role;
  const admin = role === "ADMIN" || role === "SUPER_ADMIN";
  const pengurus = role === "PENGURUS";
  const volunteer = role === "VOLUNTEER";

  return (
    <header className="site-header">
      <div className="site-header-inner">
        <Link
          href={landingEditorPreview ? "/" : user ? (admin ? "/admin" : pengurus ? "/pengurus" : volunteer ? "/volunteer" : "/dashboard") : "/"}
          className="site-logo"
        >
          <img
            src="/images/logo-yukngaji-bsd.png"
            alt="YukNgaji BSD"
            width={42}
            height={42}
            style={{
              objectFit: "contain",
              background: "#00BFFF",
              padding: 6,
              borderRadius: 8,
            }}
          />
          <span>YukNgaji BSD</span>
        </Link>

        <button
          type="button"
          className="mobile-menu-toggle"
          aria-expanded={menuOpen}
          aria-label={menuOpen ? copy.navCloseMenu : copy.navOpenMenu}
          onClick={() => setMenuOpen(!menuOpen)}
        >
          ☰
        </button>

        <nav className={`site-nav ${menuOpen ? "site-nav-open" : ""}`}>
          {landingEditorPreview && ready && (
            <>
              <Link href="/kegiatan"><InlineText path="publicCopy.navEvents" value={copy.navEvents} /></Link>
              <Link href="/blog"><InlineText path="publicCopy.navBlog" value={copy.navBlog} /></Link>
              <Link href={copy.navLoginHref} className="nav-cta"><InlineText path="publicCopy.navLogin" value={copy.navLogin} /></Link>
            </>
          )}

          {!landingEditorPreview && !user && ready && (
            <>
              <Link href="/kegiatan"><InlineText path="publicCopy.navEvents" value={copy.navEvents} /></Link>
              <Link href="/blog"><InlineText path="publicCopy.navBlog" value={copy.navBlog} /></Link>
              <Link href={copy.navLoginHref} className="nav-cta"><InlineText path="publicCopy.navLogin" value={copy.navLogin} /></Link>
            </>
          )}

          {!landingEditorPreview && user && admin && (
            <>
              <Link href="/admin">Dashboard</Link>
              <Link href="/admin/landing">Landing CMS</Link>
              <Link href="/admin/events">Event</Link>
              <Link href="/admin/blog">Blog</Link>
              <Link href="/admin/pages">Halaman</Link>
              <Link href="/admin/pixel">Pixel</Link>
              <Link href="/kegiatan">Kegiatan</Link>
              <Link href="/profil">Profil</Link>
              <Link href="/profil/badges">Badge</Link>
              <span className="header-user">{user.nickname || user.email}</span>
              <button type="button" className="nav-cta" onClick={logout}>Keluar</button>
            </>
          )}

          {!landingEditorPreview && user && volunteer && (
            <>
              <Link href="/volunteer"><InlineText path="publicCopy.navDashboard" value={copy.navDashboard} /></Link>
              <Link href="/volunteer/perjalanan"><InlineText path="publicCopy.navJourney" value={copy.navJourney} /></Link>
              <Link href="/volunteer/jadwal"><InlineText path="publicCopy.navSchedule" value={copy.navSchedule} /></Link>
              <Link href="/volunteer/kelompok"><InlineText path="publicCopy.navGroups" value={copy.navGroups} /></Link>
              <Link href="/kegiatan"><InlineText path="publicCopy.navEvents" value={copy.navEvents} /></Link>
              <Link href="/profil">Profil</Link>
              <Link href="/profil/badges">Badge</Link>
              <span className="header-user">{user.nickname || user.email}</span>
              <button type="button" className="nav-cta" onClick={logout}>Keluar</button>
            </>
          )}

          {!landingEditorPreview && user && pengurus && (
            <>
              <Link href="/pengurus"><InlineText path="publicCopy.navDashboard" value={copy.navDashboard} /></Link>
              <Link href="/pengurus/events"><InlineText path="publicCopy.navCreateEvent" value={copy.navCreateEvent} /></Link>
              <Link href="/pengurus/landing"><InlineText path="publicCopy.navVolunteerLanding" value={copy.navVolunteerLanding} /></Link>
              <Link href="/kegiatan"><InlineText path="publicCopy.navEvents" value={copy.navEvents} /></Link>
              <Link href="/profil">Profil</Link>
              <Link href="/profil/badges">Badge</Link>
              <span className="header-user">{user.nickname || user.email}</span>
              <button type="button" className="nav-cta" onClick={logout}>Keluar</button>
            </>
          )}

          {!landingEditorPreview && user && !admin && !pengurus && !volunteer && (
            <>
              <Link href="/dashboard"><InlineText path="publicCopy.navDashboard" value={copy.navDashboard} /></Link>
              <Link href="/kegiatan"><InlineText path="publicCopy.navEvents" value={copy.navEvents} /></Link>
              <Link href="/profil"><InlineText path="publicCopy.navProfile" value={copy.navProfile} /></Link>
              <Link href="/profil/badges">Badge</Link>
              <span className="header-user">{user.nickname || user.email}</span>
              <button type="button" className="nav-cta" onClick={logout}>Keluar</button>
            </>
          )}
        </nav>
      </div>
    </header>
  );
}