'use client'

import { useState } from 'react'
import { Link } from '@/i18n/navigation'
import { useRouter } from '@/i18n/navigation'

const SERVER_NAME = 'NovaWoW'

/**
 * Cabecera / barra de navegación — réplica EXACTA del partial Django
 * `home/templates/partials/header.html` con las clases del tema real
 * (nav-wrapper, nav-bar, nav-dropdown...). Los enlaces internos que ya
 * existen en web-next usan <Link> (next-intl); el resto se mantiene igual
 * que en Django. El toggle móvil replica `nwNavBar()` de nw-scripts.js.
 */
export function SiteHeader({
  loggedIn,
  accountLabel,
  realmName,
  realmHref,
  playersHref,
}: {
  loggedIn: boolean
  accountLabel: string
  realmName: string
  realmHref: string
  playersHref: string
}) {
  const router = useRouter()
  const [open, setOpen] = useState(false)

  async function logout(e: React.MouseEvent) {
    e.preventDefault()
    await fetch('/api/auth/logout', { method: 'POST', credentials: 'same-origin' })
    router.push('/')
    router.refresh()
  }

  return (
    <header>
      <div className="nav-wrapper">
        <div className={open ? 'nav-bar responsive' : 'nav-bar'} id="nw-nav-bar">
          <a
            href="javascript:void(0);"
            className={open ? 'icon change' : 'icon'}
            id="menu-icon"
            onClick={(e) => {
              e.preventDefault()
              setOpen((v) => !v)
            }}
          >
            <div className="bar1"></div>
            <div className="bar2"></div>
            <div className="bar3"></div>
          </a>

          {loggedIn ? (
            <Link href="/">INICIO</Link>
          ) : (
            <Link href="/register">CREAR CUENTA</Link>
          )}

          <div className="nav-dropdown">
            <div className="nav-dropdown-btn">
              DESCARGAS <i className="fas fa-caret-down"></i>
            </div>
            <div className="nav-dropdown-content">
              <p>
                <a href="/download-client">CLIENTE</a>
              </p>
              <p>
                <a href="/download-addons">ADDONS</a>
              </p>
            </div>
          </div>

          <div className="nav-dropdown">
            <div className="nav-dropdown-btn">
              {realmName} <i className="fas fa-caret-down"></i>
            </div>
            <div className="nav-dropdown-content">
              <p>
                <a href="/changelogs">
                  CHANGELOG
                </a>
              </p>
              <p>
                <a href={realmHref}>REINO</a>
              </p>
              {loggedIn && (
                <p>
                  <a href={playersHref}>JUGADORES</a>
                </p>
              )}
            </div>
          </div>

          <div className="nav-dropdown">
            <div className="nav-dropdown-btn">
              COMUNIDAD <i className="fas fa-caret-down"></i>
            </div>
            <div className="nav-dropdown-content">
              <p>
                <Link href="/forum">FOROS</Link>
              </p>
              <p>
                <a href="https://wotlk.novawow.com" target="_blank" rel="noopener noreferrer">
                  WOTLK DB
                </a>
              </p>
              <p>
                <a href="/content-creators">VIDEOS</a>
              </p>
              {loggedIn && (
                <p>
                  <a href="/help">AYUDA</a>
                </p>
              )}
            </div>
          </div>

          {loggedIn ? (
            <div className="nav-dropdown">
              <div className="nav-dropdown-btn">
                {accountLabel} <i className="fas fa-caret-down"></i>
              </div>
              <div className="nav-dropdown-content">
                <p>
                  <Link href="/my-account">MI CUENTA</Link>
                </p>
                <p>
                  <a href="javascript:void(0);" onClick={logout}>
                    DESCONECTAR
                  </a>
                </p>
              </div>
            </div>
          ) : (
            <Link href="/login" className="last">
              CONECTAR
            </Link>
          )}
        </div>
      </div>

      {/* eslint-disable @next/next/no-img-element */}
      <a href="/">
        <img
          className="nw-long-logo"
          src="/nw-themes/nw-ryu/nw-images/nw-logos/nw-long-logo.webp"
          alt={SERVER_NAME}
          title={SERVER_NAME}
        />
      </a>
      <a href="javascript:void(0);">
        <img
          className="nw-logo"
          src="/nw-themes/nw-ryu/nw-images/nw-logos/nw-logo.webp"
          alt="NW"
          title="NW"
        />
      </a>
      {/* eslint-enable @next/next/no-img-element */}
    </header>
  )
}