'use client';

import React, {useState} from 'react';
import {useTranslations} from 'next-intl';
import {useRouter} from 'next/navigation';
import {motion} from 'framer-motion';
import {FaSearch} from 'react-icons/fa';

import {DATE_RANGES} from '@/components/Evenements/FormFindEvent/constants';
import {startNavigationLoader} from '@/components/global/NavigationLoader';

import './HeroSection.css';

interface Discipline {
  dprId: string | number;
  dprNom: string;
}

interface HeroSectionProps {
  /** Accueil de domaine (spec L77) : le domaine est présélectionné dans la recherche. */
  domaineId?: number | string;
  locale: string;
  dpr?: Discipline[];
}

export default function HeroSection({locale, dpr = [], domaineId}: HeroSectionProps) {
  const t = useTranslations('HomePage');
  const router = useRouter();
  const [what, setWhat] = useState(domaineId ? String(domaineId) : '');
  const [when, setWhen] = useState<string>(DATE_RANGES.CURRENT_WEEK);
  const [where, setWhere] = useState('');

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const params = new URLSearchParams();
    if (what) params.set('tev', what);
    if (when) params.set('when', when);
    if (where.trim()) params.set('q', where.trim());
    const qs = params.toString();
    startNavigationLoader();
    router.push(`/${locale}/evenements${qs ? `?${qs}` : ''}`);
  };

  return (
    <section className="tk-hero">
      <div className="tk-hero__stripes" aria-hidden="true" />
      <div className="container position-relative">
        <motion.div
          className="tk-hero__content text-center"
          initial={{opacity: 0, y: 30}}
          animate={{opacity: 1, y: 0}}
          transition={{duration: 0.6}}
        >
          <span className="tk-hero__ghost" aria-hidden="true">Degemer mat&nbsp;!</span>
          <h1 className="tk-hero__title">
            {t('hero_title_line1')}
            <br />
            <span className="tk-hero__title-accent">{t('hero_title_line2')}</span>
          </h1>
          <p className="tk-hero__lead">{t('hero_lead')}</p>
        </motion.div>
      </div>

      <div className="container">
        <form className="tk-hero-search" onSubmit={handleSearch} role="search">
          <div className="tk-hero-search__field">
            <label className="tk-hero-search__label" htmlFor="hero-what">
              {t('search_what')}
            </label>
            <select
              id="hero-what"
              className="tk-hero-search__control"
              value={what}
              onChange={(e) => setWhat(e.target.value)}
            >
              <option value="">{t('search_all_types')}</option>
              {dpr.map((d) => (
                <option key={d.dprId} value={d.dprId}>
                  {d.dprNom}
                </option>
              ))}
            </select>
          </div>

          <div className="tk-hero-search__field">
            <label className="tk-hero-search__label" htmlFor="hero-when">
              {t('search_when')}
            </label>
            <select
              id="hero-when"
              className="tk-hero-search__control"
              value={when}
              onChange={(e) => setWhen(e.target.value)}
            >
              <option value={DATE_RANGES.CURRENT_WEEK}>{t('search_this_week')}</option>
              <option value={DATE_RANGES.NEXT_10_DAYS}>{t('search_next_10_days')}</option>
            </select>
          </div>

          <div className="tk-hero-search__field">
            <label className="tk-hero-search__label" htmlFor="hero-where">
              {t('search_where')}
            </label>
            <input
              id="hero-where"
              type="text"
              className="tk-hero-search__control"
              placeholder={t('search_where_placeholder')}
              value={where}
              onChange={(e) => setWhere(e.target.value)}
            />
          </div>

          <button type="submit" className="tk-hero-search__submit" aria-label={t('search_submit')}>
            <FaSearch aria-hidden="true" />
            <span className="tk-hero-search__submit-text">{t('search_submit')}</span>
          </button>
        </form>
      </div>
    </section>
  );
}