'use client'

import { useState } from 'react'
import { useLocale, useTranslations } from 'next-intl'
import { Link } 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 locale = useLocale()
  const t = useTranslations('UI')
  const [open, setOpen] = useState(false)

  return (
    <header>
      <div className="nav-wrapper">
        <div className={open ? 'nav-bar responsive' : 'nav-bar'} id="nw-nav-bar">
          <a
            role="button"
            tabIndex={0}
            className={open ? 'icon change' : 'icon'}
            id="menu-icon"
            onClick={() => setOpen((v) => !v)}
          >
            <div className="bar1"></div>
            <div className="bar2"></div>
            <div className="bar3"></div>
          </a>

          {loggedIn ? (
            <Link href="/">{t('header.home')}</Link>
          ) : (
            <Link href="/create-account">{t('header.register')}</Link>
          )}

          <div className="nav-dropdown">
            <div className="nav-dropdown-btn">
              {t('header.downloads')} <i className="fas fa-caret-down"></i>
            </div>
            <div className="nav-dropdown-content">
              <p>
                <Link href="/download-client">{t('header.client')}</Link>
              </p>
              <p>
                <Link href="/download-addons">{t('header.addons')}</Link>
              </p>
            </div>
          </div>

          <div className="nav-dropdown">
            <div className="nav-dropdown-btn">
              {realmName.toUpperCase()} <i className="fas fa-caret-down"></i>
            </div>
            <div className="nav-dropdown-content">
              <p>
                <Link href="/changelogs">{t('header.changelog')}</Link>
              </p>
              <p>
                <Link href={realmHref}>{t('header.realm')}</Link>
              </p>
              {loggedIn && (
                <p>
                  <Link href={playersHref}>{t('header.players')}</Link>
                </p>
              )}
            </div>
          </div>

          <div className="nav-dropdown">
            <div className="nav-dropdown-btn">
              {t('header.community')} <i className="fas fa-caret-down"></i>
            </div>
            <div className="nav-dropdown-content">
              <p>
                <Link href="/forum">{t('header.forums')}</Link>
              </p>
              <p>
                <a href="https://wotlk.novawow.com" target="_blank" rel="noopener noreferrer">
                  {t('header.wotlkDb')}
                </a>
              </p>
              <p>
                <Link href="/content-creators">{t('header.videos')}</Link>
              </p>
              {loggedIn && (
                <p>
                  <Link href="/help">{t('header.help')}</Link>
                </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">{t('header.myAccount')}</Link>
                </p>
                <p>
                  <a href={`/${locale}/log-out`}>{t('header.logout')}</a>
                </p>
              </div>
            </div>
          ) : (
            <Link href="/log-in" className="last">
              {t('header.login')}
            </Link>
          )}
        </div>
      </div>

      {/* eslint-disable @next/next/no-img-element */}
      <Link 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}
        />
      </Link>
      <Link href="/">
        <img
          className="nw-logo"
          src="/nw-themes/nw-ryu/nw-images/nw-logos/nw-logo.webp"
          alt="NW"
          title="NW"
        />
      </Link>
      {/* eslint-enable @next/next/no-img-element */}
    </header>
  )
}