'use client';

import React, {useEffect, useState} from 'react';
import {useTranslations} from 'next-intl';
import Link from 'next/link';
import {FaBars, FaChevronDown, FaSearch, FaSignOutAlt, FaTimes, FaUser, FaUserPlus} from 'react-icons/fa';
import {usePathname, useRouter} from 'next/navigation';

import {useScrollPosition} from '@/hooks/useScrollPosition';
import {useAuth} from '@/contexts/AuthContext';
import LocaleSwitcher from '@/components/LocaleSwitcher';
import MobileMenu from './MobileMenu';
import NotificationBell from '@/components/community/NotificationBell';
import TkLogoMark from '@/components/shared/TkLogoMark';
import AppBadges from '@/components/shared/AppBadges/AppBadges';
import {SearchBar} from '@/components/Headers/SearchBar';
import {getDomaines, type Domaine} from '@/services/domaineService';

import './HeaderV2.css';
import {domaineHref} from '@/utils/domaineHref';

interface HeaderV2Props {
  locale?: string;
}

export default function HeaderV2({locale = 'fr'}: HeaderV2Props) {
  const t = useTranslations('Headers');
  const {isAuthenticated, logout} = useAuth();
  const router = useRouter();
  const pathname = usePathname();
  const isScrolled = useScrollPosition(50);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [isDomainesOpen, setIsDomainesOpen] = useState(false);
  const [domaines, setDomaines] = useState<Domaine[]>([]);

  // Menu « Domaines » (spec L317) : chaque entrée mène à l'accueil du domaine.
  useEffect(() => {
    getDomaines().then(setDomaines).catch(() => setDomaines([]));
  }, []);

  const headerClass = `headerv2${isScrolled ? ' headerv2--scrolled' : ''}`;

  const isActive = (href: string) =>
    href === `/${locale}`
      ? pathname === `/${locale}` || pathname === '/'
      : pathname === href || pathname?.startsWith(`${href}/`);

  const navLinkClass = (href: string) =>
    `headerv2__nav-link${isActive(href) ? ' headerv2__nav-link--active' : ''}`;

  return (
    <>
      <header className={headerClass} role="banner">
        <div className="container-xl">
          <div className="headerv2__inner">
            {/* Logo */}
            <Link href={`/${locale}`} className="headerv2__logo">
              <TkLogoMark />
              <span className="headerv2__logo-text">
                <span className="headerv2__logo-tamm">Tamm</span>
                <span className="headerv2__logo-kreiz">Kreiz</span>
              </span>
            </Link>

            {/* Desktop nav */}
            <nav className="headerv2__nav d-none d-lg-flex">
              <Link href={`/${locale}`} className={navLinkClass(`/${locale}`)}>
                {t('home_link')}
              </Link>
              <Link href={`/${locale}/evenements`} className={navLinkClass(`/${locale}/evenements`)}>
                {t('agenda_link')}
              </Link>
              <Link href={`/${locale}/groupes`} className={navLinkClass(`/${locale}/groupes`)}>
                {t('annuaire_link')}
              </Link>
              <Link href={`/${locale}/articles`} className={navLinkClass(`/${locale}/articles`)}>
                {t('mag_link')}
              </Link>
              <a href={process.env.NEXT_PUBLIC_CANAL_BREIZH_URL} className="headerv2__nav-link" target="_blank" rel="noopener noreferrer">
                {t('canalbreizh_link')}
              </a>
              {domaines.length > 0 && (
                <div className={`headerv2__dropdown${isDomainesOpen ? ' headerv2__dropdown--open' : ''}`}>
                  <button
                    type="button"
                    className="headerv2__nav-link headerv2__dropdown-toggle"
                    aria-haspopup="true"
                    aria-expanded={isDomainesOpen}
                    onClick={() => setIsDomainesOpen(!isDomainesOpen)}
                  >
                    {t('domaines_link')}
                    <FaChevronDown aria-hidden="true" className="headerv2__dropdown-chevron" />
                  </button>
                  <ul className="headerv2__dropdown-menu">
                    {domaines.map((domaine) => (
                      <li key={domaine.dprId}>
                        <Link
                          href={domaineHref(locale, domaine.dprId, domaine.dprNom)}
                          className="headerv2__dropdown-link"
                          onClick={() => setIsDomainesOpen(false)}
                        >
                          {domaine.dprNom}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
              <Link href={`/${locale}/adhesion`} className={navLinkClass(`/${locale}/adhesion`)}>
                {t('adhesion_link')}
              </Link>
            </nav>

            {/* Actions */}
            <div className="headerv2__actions">
              {/* Sur mobile le sélecteur de langue vit dans le menu burger */}
              <span className="d-none d-sm-flex">
                <LocaleSwitcher />
              </span>

              <AppBadges variant="compact" className="d-none d-xl-inline-flex" />

              <button
                type="button"
                className="headerv2__icon-btn"
                aria-label={isSearchOpen ? t('aria_close_search') : t('aria_search')}
                aria-expanded={isSearchOpen}
                aria-controls="headerv2-search"
                onClick={() => setIsSearchOpen(!isSearchOpen)}
              >
                {isSearchOpen ? <FaTimes /> : <FaSearch />}
              </button>

              <NotificationBell />

              {!isAuthenticated && (
                <Link href={`/${locale}/inscription`} className="headerv2__auth-link d-none d-lg-inline-flex">
                  <FaUserPlus aria-hidden="true" />
                  <span>{t('signup_button')}</span>
                </Link>
              )}

              <Link
                href={isAuthenticated ? `/${locale}/profil` : `/${locale}/connexion`}
                className="headerv2__auth-link"
              >
                <FaUser aria-hidden="true" />
                <span className="d-none d-lg-inline">
                  {isAuthenticated ? t('profile_button') : t('login_button')}
                </span>
              </Link>

              {isAuthenticated && (
                <button
                  className="headerv2__icon-btn"
                  onClick={async () => {
                    await logout();
                    router.push('/');
                  }}
                  aria-label={t('logout_button')}
                >
                  <FaSignOutAlt />
                </button>
              )}

              <Link
                href={`/${locale}/proposition-evenement`}
                className="headerv2__cta d-none d-md-inline-flex"
              >
                {t('propose_event_button')}
              </Link>

              {/* Burger (mobile) */}
              <button
                className="headerv2__burger d-lg-none"
                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                aria-label={t('aria_open_menu')}
              >
                <FaBars />
              </button>
            </div>
          </div>
          {/* Barre de recherche dépliable (spec L314) */}
          {isSearchOpen && (
            <div id="headerv2-search" className="headerv2__search">
              <SearchBar />
            </div>
          )}
        </div>
      </header>
      <MobileMenu
        isOpen={isMobileMenuOpen}
        onClose={() => setIsMobileMenuOpen(false)}
        locale={locale}
        domaines={domaines}
      />
    </>
  );
}