'use client';

import React from 'react';
import {useTranslations} from 'next-intl';
import Link from 'next/link';
import {FaSignOutAlt, FaTimes, FaUser, FaUserPlus} from 'react-icons/fa';
import {useRouter} from 'next/navigation';
import {AnimatePresence, motion} from 'framer-motion';

import {useAuth} from '@/contexts/AuthContext';
import LocaleSwitcher from '@/components/LocaleSwitcher';
import TkLogoMark from '@/components/shared/TkLogoMark';
import type {Domaine} from '@/services/domaineService';

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

interface MobileMenuProps {
  isOpen: boolean;
  onClose: () => void;
  locale: string;
  /** Domaines de pratique, chacun menant à l'agenda filtré (spec L317). */
  domaines?: Domaine[];
}

export default function MobileMenu({isOpen, onClose, locale, domaines = []}: MobileMenuProps) {
  const t = useTranslations('Headers');
  const {isAuthenticated, logout} = useAuth();
  const router = useRouter();

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className="mobile-menu"
          initial={{opacity: 0, y: -20}}
          animate={{opacity: 1, y: 0}}
          exit={{opacity: 0, y: -20}}
          transition={{type: 'tween', duration: 0.3}}
        >
          <div className="mobile-menu__header">
            <span className="mobile-menu__logo">
              <TkLogoMark size={12} />
              <span>
                <span className="mobile-menu__logo-tamm">Tamm</span>
                <span className="mobile-menu__logo-kreiz">Kreiz</span>
              </span>
            </span>
            <button
              className="mobile-menu__close"
              onClick={onClose}
              aria-label={t('aria_close_menu')}
            >
              <FaTimes />
            </button>
          </div>

          <nav className="mobile-menu__nav">
            <Link href={`/${locale}`} className="mobile-menu__link" onClick={onClose}>
              {t('home_link')}
            </Link>
            <Link href={`/${locale}/evenements`} className="mobile-menu__link" onClick={onClose}>
              {t('agenda_link')}
            </Link>
            <Link href={`/${locale}/groupes`} className="mobile-menu__link" onClick={onClose}>
              {t('annuaire_link')}
            </Link>
            <Link href={`/${locale}/articles`} className="mobile-menu__link" onClick={onClose}>
              {t('mag_link')}
            </Link>
            <a href={process.env.NEXT_PUBLIC_CANAL_BREIZH_URL} className="mobile-menu__link" target="_blank" rel="noopener noreferrer" onClick={onClose}>
              {t('canalbreizh_link')}
            </a>
            {domaines.length > 0 && (
              <div className="mobile-menu__domaines">
                <span className="mobile-menu__domaines-title">{t('domaines_link')}</span>
                {domaines.map((domaine) => (
                  <Link key={domaine.dprId} href={domaineHref(locale, domaine.dprId, domaine.dprNom)} className="mobile-menu__link mobile-menu__link--sub" onClick={onClose}>
                    {domaine.dprNom}
                  </Link>
                ))}
              </div>
            )}
            <Link href={`/${locale}/adhesion`} className="mobile-menu__link" onClick={onClose}>
              {t('adhesion_link')}
            </Link>
            <Link
              href={`/${locale}/proposition-evenement`}
              className="mobile-menu__cta"
              onClick={onClose}
            >
              {t('propose_event_button')}
            </Link>
          </nav>

          <div className="mobile-menu__footer">
            <div className="mobile-menu__footer-separator" />
            <LocaleSwitcher />
            {!isAuthenticated && (
              <Link href={`/${locale}/inscription`} className="mobile-menu__auth-btn" onClick={onClose}>
                <FaUserPlus />
                <span>{t('signup_button')}</span>
              </Link>
            )}
            <Link
              href={isAuthenticated ? `/${locale}/profil` : `/${locale}/connexion`}
              className="mobile-menu__auth-btn"
              onClick={onClose}
            >
              <FaUser />
              <span>{isAuthenticated ? t('profile_button') : t('login_button')}</span>
            </Link>
            {isAuthenticated && (
              <button
                className="mobile-menu__auth-btn"
                onClick={async () => {
                  onClose();
                  await logout();
                  router.push('/');
                }}
              >
                <FaSignOutAlt />
                <span>{t('logout_button')}</span>
              </button>
            )}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}