// BEGIN CHANGE: navbar responsiva (drawer mobile + desktop dropdowns)
"use client";

import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { useI18n } from "@/i18n/LanguageProvider";
import { useAuth } from "@/auth/AuthProvider";
import { LanguageSwitcher } from "@/components/LanguageSwitcher";
import { NotificationBell } from "@/components/NotificationBell";
import { apiUrl } from "@/lib/api";

type NavItem = { label: string; href: string };
type NavGroup = { id: string; label: string; items: NavItem[] };

export function Navbar() {
  const { t } = useI18n();
  const { ready, account, logout } = useAuth();
  const [openGroup, setOpenGroup] = useState<string | null>(null);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [mobileGroup, setMobileGroup] = useState<string | null>(null);
  // BEGIN CHANGE: ref no header inteiro (drawer mobile incluso) para nao fechar ao clicar no menu
  const headerRef = useRef<HTMLElement | null>(null);
  // END CHANGE
  const [playersOnline, setPlayersOnline] = useState<number | null>(null);
  // BEGIN CHANGE: status online/offline do servidor em tempo real (item 4)
  const [serverOnline, setServerOnline] = useState<boolean | null>(null);
  // END CHANGE

  const groups: NavGroup[] = [
    {
      id: "news",
      label: t.nav.groups.news,
      items: [
        { label: t.nav.items.news, href: "/news" },
        { label: t.nav.items.changelog, href: "/changelog" },
      ],
    },
    {
      id: "account",
      label: t.nav.groups.account,
      items: account
        ? [
            { label: t.nav.items.account, href: "/account" },
            ...(account.isPremium
              ? [{ label: t.nav.items.serialItems, href: "/serial-items" }]
              : []),
            { label: t.nav.items.namelock, href: "/namelock/" },
            { label: t.nav.items.support, href: "/support" },
            { label: t.nav.items.polls, href: "/polls" },
            ...((account.canAccessAdminPanel ?? (account.pageAccess ?? 0) > 2)
              ? [{ label: t.nav.items.admin, href: "/admin" }]
              : []),
            { label: t.nav.items.download, href: "/download" },
          ]
        : [
            { label: t.nav.items.account, href: "/account" },
            { label: t.nav.items.login, href: "/login" },
            { label: t.nav.items.createAccount, href: "/create-account" },
            { label: t.nav.items.lostAccount, href: "/lost-account" },
            { label: t.nav.items.namelock, href: "/namelock/" },
            { label: t.nav.items.download, href: "/download" },
          ],
    },
    {
      id: "community",
      label: t.nav.groups.community,
      items: [
        { label: t.nav.items.character, href: "/character" },
        { label: t.nav.items.online, href: "/online" },
        { label: t.nav.items.highscores, href: "/highscores" },
        { label: t.nav.items.guilds, href: "/guilds" },
        { label: t.nav.items.wars, href: "/wars" },
        { label: t.nav.items.records, href: "/records" },
        { label: t.nav.items.lastKills, href: "/last-kills" },
        { label: t.nav.items.casting, href: "/casting" },
        { label: t.nav.items.jackpot, href: "/jackpot" },
        { label: t.nav.items.team, href: "/team" },
      ],
    },
    {
      id: "library",
      label: t.nav.groups.library,
      items: [
        { label: t.nav.items.monsters, href: "/monsters" },
        { label: t.nav.items.itemDrops, href: "/item-drops" },
        { label: t.nav.items.itemsCatalog, href: "/items" },
        { label: t.nav.items.imbuements, href: "/imbuements" },
        { label: t.nav.items.prey, href: "/prey" },
        { label: t.nav.items.npcsCatalog, href: "/npcs" },
        { label: t.nav.items.vocations, href: "/vocations" },
        { label: t.nav.items.addons, href: "/addons" },
        { label: t.nav.items.rules, href: "/rules" },
        { label: t.nav.items.serverInfo, href: "/server-info" },
        { label: t.nav.items.raids, href: "/raids" },
        { label: t.nav.items.tasks, href: "/tasks" },
        { label: t.nav.items.events, href: "/events" },
      ],
    },
    {
      id: "shop",
      label: t.nav.groups.shop,
      items: [
        { label: t.nav.items.donate, href: "/donate" },
        { label: t.nav.items.shopSystem, href: "/shop" },
        { label: t.nav.items.characterMarket, href: "/character-market" },
        { label: t.nav.items.tradeoff, href: "/tradeoff" },
      ],
    },
  ];

  useEffect(() => {
    function onDocClick(e: MouseEvent) {
      if (!headerRef.current) return;
      if (!headerRef.current.contains(e.target as Node)) {
        setOpenGroup(null);
        setMobileOpen(false);
        setMobileGroup(null);
      }
    }
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") {
        setOpenGroup(null);
        setMobileOpen(false);
        setMobileGroup(null);
      }
    }
    document.addEventListener("mousedown", onDocClick);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDocClick);
      document.removeEventListener("keydown", onKey);
    };
  }, []);

  // Trava scroll do body com menu mobile aberto
  useEffect(() => {
    if (!mobileOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [mobileOpen]);

  // BEGIN CHANGE: polling curto (15s) do status leve (online/offline + contagem) - item 4
  useEffect(() => {
    let cancelled = false;
    function load() {
      fetch(apiUrl("status.php"))
        .then((r) => (r.ok ? r.json() : null))
        .then((json) => {
          if (cancelled || !json) return;
          if (typeof json.count === "number") setPlayersOnline(json.count);
          if (typeof json.online === "boolean") setServerOnline(json.online);
        })
        .catch(() => {
          if (!cancelled) setServerOnline(false);
        });
    }
    load();
    const id = window.setInterval(load, 15000);
    return () => {
      cancelled = true;
      window.clearInterval(id);
    };
  }, []);
  // END CHANGE

  function toggleGroup(id: string) {
    setOpenGroup((cur) => (cur === id ? null : id));
  }

  function closeAll() {
    setOpenGroup(null);
    setMobileOpen(false);
    setMobileGroup(null);
  }

  // BEGIN CHANGE: label muda entre Online/Offline conforme status do server (item 4)
  const onlineTemplate =
    serverOnline === false ? t.hero.badgeOffline : t.hero.badgeOnline;
  const onlineLabel = onlineTemplate.replace(
    "{n}",
    playersOnline !== null ? String(playersOnline) : "-"
  );
  const isServerOffline = serverOnline === false;
  // END CHANGE

  return (
    <header
      ref={headerRef}
      className="sticky top-0 z-40 border-b border-border/80 bg-background/90 backdrop-blur"
    >
      <div className="mx-auto flex h-14 w-full max-w-6xl items-center justify-between gap-2 px-4 sm:h-16 sm:gap-4 sm:px-6">
        {/* BEGIN CHANGE: logo pequena no menu (inline style evita estourar com PNG grande) */}
        <Link
          href="/"
          className="flex min-w-0 shrink items-center gap-2"
          onClick={closeAll}
        >
          <span className="inline-flex h-7 w-5 shrink-0 items-center justify-center overflow-hidden sm:h-8 sm:w-6">
            <img
              src="/logo.png?v=4"
              alt="White Antidote"
              width={20}
              height={28}
              className="block max-h-full max-w-full object-contain"
              style={{ height: "28px", width: "auto", maxHeight: "28px" }}
            />
          </span>
          <span className="truncate text-base font-semibold tracking-tight sm:text-lg">
            <span className="sm:hidden">WA</span>
            <span className="hidden sm:inline">White Antidote</span>
          </span>
        </Link>
        {/* END CHANGE */}

        {/* Desktop dropdowns */}
        <ul className="hidden items-center gap-1 text-sm text-muted lg:flex">
          {groups.map((group) => {
            const open = openGroup === group.id;
            return (
              <li key={group.id} className="relative">
                <button
                  type="button"
                  aria-expanded={open}
                  aria-haspopup="true"
                  onClick={() => toggleGroup(group.id)}
                  onMouseEnter={() => setOpenGroup(group.id)}
                  className={`inline-flex items-center gap-1 rounded-md px-3 py-2 transition-colors hover:text-foreground ${
                    open ? "text-foreground" : ""
                  }`}
                >
                  {group.label}
                  <Chevron open={open} />
                </button>
                {open ? (
                  <ul
                    role="menu"
                    onMouseLeave={() => setOpenGroup(null)}
                    className="absolute left-0 top-full z-30 min-w-[12.5rem] rounded-lg border border-border bg-background py-1 shadow-lg"
                  >
                    {group.items.map((item) => (
                      <li key={item.href + item.label} role="none">
                        <Link
                          role="menuitem"
                          href={item.href}
                          onClick={closeAll}
                          className="block px-3 py-2 text-sm text-muted transition-colors hover:bg-brand/10 hover:text-foreground"
                        >
                          {item.label}
                        </Link>
                      </li>
                    ))}
                  </ul>
                ) : null}
              </li>
            );
          })}
        </ul>

        {/* Desktop actions */}
        <div className="hidden items-center gap-3 lg:flex">
          {/* BEGIN CHANGE: badge muda de cor conforme online/offline (item 4) */}
          <Link
            href="/online"
            onClick={closeAll}
            title={onlineLabel}
            className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-opacity hover:opacity-90 ${
              isServerOffline
                ? "border-red-500/30 bg-red-500/10 text-red-300"
                : "border-emerald-500/30 bg-emerald-500/10 text-emerald-300"
            }`}
          >
            <span
              className={`h-1.5 w-1.5 shrink-0 rounded-full ${
                isServerOffline ? "bg-red-400" : "bg-emerald-400"
              }`}
              aria-hidden
            />
            <span>{onlineLabel}</span>
          </Link>
          {/* END CHANGE */}
          <LanguageSwitcher />
          {/* BEGIN CHANGE: sino de notificacoes (item 10) */}
          {ready && account ? <NotificationBell /> : null}
          {/* END CHANGE */}
          {ready && account ? (
            <>
              <Link
                href="/account"
                onClick={closeAll}
                className="max-w-[10rem] truncate rounded-lg bg-brand/10 px-4 py-2 text-sm font-medium text-brand transition-opacity hover:opacity-90"
              >
                {account.name}
              </Link>
              <button
                type="button"
                onClick={() => {
                  logout();
                  closeAll();
                  window.location.href = "/";
                }}
                className="rounded-lg px-4 py-2 text-sm text-muted transition-colors hover:text-foreground"
              >
                {t.auth.logout}
              </button>
            </>
          ) : (
            <>
              <Link
                href="/login"
                onClick={closeAll}
                className="rounded-lg px-3 py-2 text-sm text-muted transition-colors hover:text-foreground"
              >
                {t.login}
              </Link>
              <Link
                href="/create-account"
                onClick={closeAll}
                className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-background transition-opacity hover:opacity-90"
              >
                {t.createAccount}
              </Link>
            </>
          )}
        </div>

        {/* Mobile: so hamburger (evita barra lotada) */}
        <button
          type="button"
          className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-border text-muted transition-colors hover:text-foreground lg:hidden"
          aria-expanded={mobileOpen}
          aria-label={mobileOpen ? t.nav.close : t.nav.menu}
          onClick={() => setMobileOpen((v) => !v)}
        >
          {mobileOpen ? (
            <span className="text-lg leading-none" aria-hidden>
              {"\u00D7"}
            </span>
          ) : (
            <span className="flex flex-col gap-1.5" aria-hidden>
              <span className="block h-0.5 w-5 rounded bg-current" />
              <span className="block h-0.5 w-5 rounded bg-current" />
              <span className="block h-0.5 w-5 rounded bg-current" />
            </span>
          )}
        </button>
      </div>

      {/* Mobile drawer */}
      {mobileOpen ? (
        <div className="max-h-[calc(100dvh-3.5rem)] overflow-y-auto border-t border-border/80 bg-background lg:hidden">
          <div className="mx-auto flex max-w-6xl flex-col gap-3 px-4 py-3">
            <div className="flex flex-wrap items-center justify-between gap-2">
              {/* BEGIN CHANGE: badge mobile online/offline (item 4) */}
              <Link
                href="/online"
                onClick={closeAll}
                className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium ${
                  isServerOffline
                    ? "border-red-500/30 bg-red-500/10 text-red-300"
                    : "border-emerald-500/30 bg-emerald-500/10 text-emerald-300"
                }`}
              >
                <span
                  className={`h-1.5 w-1.5 shrink-0 rounded-full ${
                    isServerOffline ? "bg-red-400" : "bg-emerald-400"
                  }`}
                  aria-hidden
                />
                {onlineLabel}
              </Link>
              {/* END CHANGE */}
              <div className="flex items-center gap-2">
                {/* BEGIN CHANGE: sino de notificacoes mobile (item 10) */}
                {ready && account ? <NotificationBell /> : null}
                {/* END CHANGE */}
                <LanguageSwitcher />
              </div>
            </div>

            {ready && account ? (
              <div className="flex flex-wrap items-center gap-2">
                <Link
                  href="/account"
                  onClick={closeAll}
                  className="min-w-0 flex-1 truncate rounded-lg bg-brand/10 px-3 py-2.5 text-center text-sm font-medium text-brand"
                >
                  {account.name}
                </Link>
                <button
                  type="button"
                  onClick={() => {
                    logout();
                    closeAll();
                    window.location.href = "/";
                  }}
                  className="rounded-lg border border-border px-3 py-2.5 text-sm text-muted"
                >
                  {t.auth.logout}
                </button>
              </div>
            ) : (
              <div className="grid grid-cols-2 gap-2">
                <Link
                  href="/login"
                  onClick={closeAll}
                  className="rounded-lg border border-border px-3 py-2.5 text-center text-sm text-muted"
                >
                  {t.login}
                </Link>
                <Link
                  href="/create-account"
                  onClick={closeAll}
                  className="rounded-lg bg-brand px-3 py-2.5 text-center text-sm font-medium text-background"
                >
                  {t.createAccount}
                </Link>
              </div>
            )}

            <ul className="rounded-xl border border-border/70">
              {groups.map((group) => {
                const open = mobileGroup === group.id;
                return (
                  <li key={group.id} className="border-b border-border/60 last:border-0">
                    <button
                      type="button"
                      className="flex w-full items-center justify-between px-3 py-3.5 text-left text-sm font-medium text-foreground"
                      aria-expanded={open}
                      onClick={() =>
                        setMobileGroup((cur) => (cur === group.id ? null : group.id))
                      }
                    >
                      {group.label}
                      <Chevron open={open} />
                    </button>
                    {open ? (
                      <ul className="space-y-0.5 bg-panel/40 px-2 pb-3">
                        {group.items.map((item) => (
                          <li key={item.href + item.label}>
                            <Link
                              href={item.href}
                              onClick={closeAll}
                              className="block rounded-md px-3 py-2.5 text-sm text-muted transition-colors hover:bg-brand/10 hover:text-foreground"
                            >
                              {item.label}
                            </Link>
                          </li>
                        ))}
                      </ul>
                    ) : null}
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      ) : null}
    </header>
  );
}

function Chevron({ open }: { open: boolean }) {
  return (
    <svg
      aria-hidden
      viewBox="0 0 12 12"
      className={`h-3 w-3 shrink-0 opacity-70 transition-transform ${open ? "rotate-180" : ""}`}
    >
      <path
        d="M2.5 4.5 L6 8 L9.5 4.5"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}
// END CHANGE