"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";

const NAV_LINKS = [
  { href: "/uyeler", label: "Üyeler" },
  { href: "/itiraflar", label: "İtiraflar" },
  { href: "/sozler", label: "Güzel Sözler" },
  { href: "/odalar", label: "Odalar" },
  { href: "/iletisim", label: "İletişim" },
];

export function MobileNav({
  isAuthenticated,
  unreadCount,
  unreadMessageCount,
  logoutAction,
}: {
  isAuthenticated: boolean;
  unreadCount: number;
  unreadMessageCount: number;
  logoutAction: () => Promise<void>;
}) {
  const [open, setOpen] = useState(false);

  // Menü açıkken arka planın kaymasını engelle.
  useEffect(() => {
    if (!open) return;
    const original = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = original;
    };
  }, [open]);

  return (
    <div className="md:hidden">
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-label="Menüyü Aç"
        className="relative flex h-10 w-10 items-center justify-center rounded-full text-text-muted hover:bg-bg-alt hover:text-accent"
      >
        <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 7h16M4 12h16M4 17h16" />
        </svg>
        {(unreadCount > 0 || unreadMessageCount > 0) && (
          <span className="absolute right-0.5 top-0.5 h-2.5 w-2.5 rounded-full bg-accent" />
        )}
      </button>

      {open &&
        typeof document !== "undefined" &&
        createPortal(
          <div className="fixed inset-0 z-[60]">
            <div className="absolute inset-0 bg-black/50" onClick={() => setOpen(false)} />
            <div className="absolute inset-y-0 right-0 flex w-[82%] max-w-[340px] flex-col overflow-y-auto bg-surface shadow-2xl">
            <div className="flex items-center justify-between border-b border-border px-5 py-4">
              <span className="font-heading text-[17px]">
                Sohbete<span className="text-accent">Gir</span>
              </span>
              <button
                type="button"
                onClick={() => setOpen(false)}
                aria-label="Menüyü Kapat"
                className="flex h-9 w-9 items-center justify-center rounded-full text-text-muted hover:bg-bg-alt hover:text-accent"
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
                  <path d="M18 6L6 18M6 6l12 12" />
                </svg>
              </button>
            </div>

            <nav className="flex flex-col gap-1 px-3 py-4">
              {NAV_LINKS.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  onClick={() => setOpen(false)}
                  className="rounded-xl px-3 py-3 text-[15px] font-semibold text-text hover:bg-bg-alt"
                >
                  {link.label}
                </Link>
              ))}
              <Link
                href="/itiraflar"
                onClick={() => setOpen(false)}
                className="mt-2 flex items-center justify-center gap-2 rounded-xl border border-border px-3 py-3 text-[14.5px] font-semibold text-text hover:border-accent hover:text-accent"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round">
                  <rect x="5" y="11" width="14" height="9" rx="2" />
                  <path d="M8 11V7a4 4 0 1 1 8 0v4" />
                </svg>
                İtiraf Et
              </Link>
            </nav>

            <div className="mt-auto flex flex-col gap-1.5 border-t border-border px-3 py-4">
              {isAuthenticated ? (
                <>
                  <Link
                    href="/mesajlar"
                    onClick={() => setOpen(false)}
                    className="flex items-center justify-between rounded-xl px-3 py-3 text-[15px] font-semibold text-text hover:bg-bg-alt"
                  >
                    Mesajlar
                    {unreadMessageCount > 0 && (
                      <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold text-white">
                        {unreadMessageCount}
                      </span>
                    )}
                  </Link>
                  <Link
                    href="/bildirimler"
                    onClick={() => setOpen(false)}
                    className="flex items-center justify-between rounded-xl px-3 py-3 text-[15px] font-semibold text-text hover:bg-bg-alt"
                  >
                    Bildirimler
                    {unreadCount > 0 && (
                      <span className="flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold text-white">
                        {unreadCount}
                      </span>
                    )}
                  </Link>
                  <Link
                    href="/profil"
                    onClick={() => setOpen(false)}
                    className="rounded-xl px-3 py-3 text-[15px] font-semibold text-text hover:bg-bg-alt"
                  >
                    Profilim
                  </Link>
                  <form
                    action={async () => {
                      setOpen(false);
                      await logoutAction();
                    }}
                  >
                    <button className="w-full rounded-full bg-accent px-6 py-3 text-[14.5px] font-semibold text-white hover:bg-accent-dark">
                      Çıkış Yap
                    </button>
                  </form>
                </>
              ) : (
                <>
                  <Link
                    href="/giris"
                    onClick={() => setOpen(false)}
                    className="rounded-xl px-3 py-3 text-center text-[15px] font-semibold text-text hover:bg-bg-alt"
                  >
                    Giriş Yap
                  </Link>
                  <Link
                    href="/kayit"
                    onClick={() => setOpen(false)}
                    className="rounded-full bg-accent px-6 py-3 text-center text-[14.5px] font-semibold text-white hover:bg-accent-dark"
                  >
                    Ücretsiz Üye Ol
                  </Link>
                </>
              )}
            </div>
          </div>
          </div>,
          document.body
        )}
    </div>
  );
}