"use client";

import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
import { logoutAction } from "@/app/logout-action";
import { LocaleSwitcher } from "./locale-switcher";

export function SiteNav({
  loggedIn,
  isAdmin,
}: {
  loggedIn: boolean;
  isAdmin: boolean;
}) {
  const t = useTranslations("nav");
  const [open, setOpen] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  const close = () => setOpen(false);

  const memberLinks = (
    <>
      <Link href="/dashboard" className="nav-link" onClick={close}>
        {t("dashboard")}
      </Link>
      <Link href="/dashboard/tools" className="nav-link" onClick={close}>
        {t("tools")}
      </Link>
      <Link href="/dashboard/wallet" className="nav-link" onClick={close}>
        {t("wallet")}
      </Link>
      <Link href="/dashboard/shop" className="nav-link" onClick={close}>
        {t("shop")}
      </Link>
      <Link href="/dashboard/escrow" className="nav-link" onClick={close}>
        {t("escrow")}
      </Link>
      {isAdmin ? (
        <>
          <Link href="/admin" className="nav-link" onClick={close}>
            {t("admin")}
          </Link>
          <Link href="/admin/chat" className="nav-link" onClick={close}>
            {t("chat")}
          </Link>
        </>
      ) : (
        <Link href="/dashboard/chat" className="nav-link" onClick={close}>
          {t("chat")}
        </Link>
      )}
    </>
  );

  const guestLinks = (
    <>
      <Link href="/login" className="nav-link" onClick={close}>
        {t("login")}
      </Link>
      <Link href="/register" className="btn-primary px-4 py-2 text-sm" onClick={close}>
        {t("register")}
      </Link>
    </>
  );

  return (
    <>
      <nav className="hidden items-center gap-1 lg:flex">
        <Link href="/market" className="nav-link">
          {t("market")}
        </Link>
        <Link href="/rates" className="nav-link">
          {t("rates")}
        </Link>
        {loggedIn ? memberLinks : guestLinks}
        <Link href="/policies" className="nav-link text-muted">
          {t("policies")}
        </Link>
        {loggedIn ? (
          <form action={logoutAction}>
            <button type="submit" className="nav-link text-muted">
              {t("logout")}
            </button>
          </form>
        ) : null}
        <LocaleSwitcher />
      </nav>

      <div className="flex items-center gap-2 lg:hidden">
        <LocaleSwitcher />
        <button
          type="button"
          suppressHydrationWarning
          className="inline-flex h-11 w-11 items-center justify-center rounded-xl border border-line bg-card"
          aria-expanded={open}
          aria-label={t("menu")}
          onClick={() => setOpen(true)}
        >
          <span className="sr-only">{t("menu")}</span>
          <span className="flex w-4 flex-col gap-1" aria-hidden>
            <span className="h-0.5 w-full rounded bg-foreground" />
            <span className="h-0.5 w-full rounded bg-foreground" />
            <span className="h-0.5 w-full rounded bg-foreground" />
          </span>
        </button>
      </div>

      {mounted && open
        ? createPortal(
            <div className="fixed inset-0 z-[80] lg:hidden">
              <button
                type="button"
                className="absolute inset-0 bg-black/45"
                aria-label={t("close")}
                onClick={close}
              />
              <aside className="absolute inset-y-0 end-0 flex w-[min(20rem,88vw)] flex-col border-s border-line bg-card pt-[env(safe-area-inset-top)] shadow-2xl">
                <div className="flex items-center justify-between border-b border-line px-4 py-3">
                  <p className="font-semibold">{t("menu")}</p>
                  <button type="button" className="nav-link text-muted" onClick={close}>
                    {t("close")}
                  </button>
                </div>
                <nav className="flex flex-1 flex-col gap-1 overflow-y-auto p-3 text-sm font-medium">
                  <Link href="/" className="nav-link" onClick={close}>
                    {t("home")}
                  </Link>
                  <Link href="/market" className="nav-link" onClick={close}>
                    {t("market")}
                  </Link>
                  <Link href="/rates" className="nav-link" onClick={close}>
                    {t("rates")}
                  </Link>
                  {loggedIn ? memberLinks : guestLinks}
                  <Link href="/policies" className="nav-link" onClick={close}>
                    {t("policies")}
                  </Link>
                  <Link href="/terms" className="nav-link" onClick={close}>
                    {t("terms")}
                  </Link>
                  {loggedIn ? (
                    <form action={logoutAction} className="mt-2">
                      <button type="submit" className="nav-link w-full text-start text-muted">
                        {t("logout")}
                      </button>
                    </form>
                  ) : null}
                </nav>
              </aside>
            </div>,
            document.body,
          )
        : null}
    </>
  );
}