/* BoatsFun — Page publique « Offres du moment » (/offres-du-moment).
   Liste les offres actives depuis GET /api/offers (backend = seule autorité sur
   les prix), filtres simples (bateau, date) affichés dès qu'il y a plus d'une
   offre, état vide professionnel, accès direct au checkout existant via le
   bookingUrl de chaque carte (shared/offers.jsx). */

(function () {
  const { I } = window.BF;
  const { t, localize, LANG } = window.BFI18N;
  const { fetchOffers, OffersGrid } = window.BFOffers;
  const { useState, useEffect, useMemo } = React;

  const styles = `
.bf .odmp-head { max-width: 760px; margin: 0 auto; text-align: center; padding-block: clamp(30px, 5vw, 54px) 8px; }
.bf .odmp-head h1 { font-family: 'Poppins', sans-serif; color: #002244; font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -1px; margin: 14px 0 10px; }
.bf .odmp-head p { color: #4a5b6c; font-size: 16px; line-height: 1.6; margin: 0; }
.bf .odmp-wrap { padding-block: 24px clamp(56px, 7vw, 96px); }
.bf .odmp-filters { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 22px 0 26px; }
.bf .odmp-filters select, .bf .odmp-filters input { min-height: 44px; padding: 0 14px; border: 1.5px solid rgba(0,34,68,.14); border-radius: 999px; background: #fff; font-family: 'Inter', sans-serif; font-size: 14px; color: #002244; }
.bf .odmp-filters select:focus, .bf .odmp-filters input:focus { outline: none; border-color: #00B5E2; }
.bf .odmp-clear { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #F0F8FF; color: #002244; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.bf .odmp-count { text-align: center; font-size: 13.5px; color: #7c8b99; margin-bottom: 18px; }
.bf .odmp-loading { text-align: center; color: #4a5b6c; padding: 50px 0; }
.bf .odmp-note { max-width: 720px; margin: 34px auto 0; background: #fff; border-left: 3px solid #00B5E2; border-radius: 12px; padding: 16px 20px; font-size: 13.5px; color: #4a5b6c; line-height: 1.6; }
.bf .odmp-note strong { color: #002244; }
`;

  function BFPageOffresDuMoment() {
    const [offers, setOffers] = useState(null); // null = chargement
    const [fBoat, setFBoat] = useState("");
    const [fDate, setFDate] = useState("");

    useEffect(() => {
      let alive = true;
      fetchOffers().then((list) => { if (alive) setOffers(list); });
      return () => { alive = false; };
    }, []);

    const boats = useMemo(() => {
      if (!offers) return [];
      const seen = new Map();
      offers.forEach((o) => seen.set(o.boatSlug, o.boatName));
      return Array.from(seen, ([slug, name]) => ({ slug, name }));
    }, [offers]);

    const shown = useMemo(() => {
      if (!offers) return [];
      return offers.filter((o) => (!fBoat || o.boatSlug === fBoat) && (!fDate || o.date === fDate));
    }, [offers, fBoat, fDate]);

    const hasFilters = offers && offers.length > 1;

    return (
      <div className="bf" data-screen-label="Offres du moment">
        <style>{styles}</style>
        <window.BFHeader />

        <header className="container odmp-head">
          <span className="section-label">
            <span className="section-label-ic" aria-hidden="true"><I.tag width="15" /></span>
            <span className="section-label-tx">{t("Rabais limités")}</span>
          </span>
          <h1>{t("Offres du moment")}</h1>
          <p>{t("Découvrez les créneaux disponibles à prix réduit dans votre région. Le prix affiché, la date et la plage horaire sont fixés par BoatsFun — réservez directement, sans négociation.")}</p>
        </header>

        <main className="container odmp-wrap">
          {offers === null ? (
            <p className="odmp-loading">{t("Chargement des offres…")}</p>
          ) : offers.length === 0 ? (
            <div className="odm-empty">
              <h3>{t("Aucune offre du moment actuellement")}</h3>
              <p>{t("Les créneaux à prix réduit sont publiés selon les disponibilités. Revenez bientôt ou consultez tous nos bateaux.")}</p>
              <a href={localize("/bateaux")} className="odm-cta">{t("Découvrir les bateaux")} <I.arrowR width="14" /></a>
            </div>
          ) : (
            <React.Fragment>
              {hasFilters && (
                <div className="odmp-filters" aria-label={t("Filtrer les offres")}>
                  <select value={fBoat} onChange={(e) => setFBoat(e.target.value)} aria-label={t("Filtrer par bateau")}>
                    <option value="">{t("Tous les bateaux")}</option>
                    {boats.map((b) => <option key={b.slug} value={b.slug}>{b.name}</option>)}
                  </select>
                  <input type="date" value={fDate} onChange={(e) => setFDate(e.target.value)} aria-label={t("Filtrer par date")} />
                  {(fBoat || fDate) && (
                    <button type="button" className="odmp-clear" onClick={() => { setFBoat(""); setFDate(""); }}>
                      {t("Effacer les filtres")}
                    </button>
                  )}
                </div>
              )}
              <p className="odmp-count">{LANG === 'en'
                ? `${shown.length} offer${shown.length > 1 ? "s" : ""} available`
                : `${shown.length} offre${shown.length > 1 ? "s" : ""} disponible${shown.length > 1 ? "s" : ""}`}</p>
              {shown.length === 0 ? (
                <div className="odm-empty">
                  <h3>{t("Aucune offre pour ces critères")}</h3>
                  <p>{t("Essayez d'autres filtres, ou consultez toutes les offres et tous les bateaux disponibles.")}</p>
                  <a href={localize("/bateaux")} className="odm-cta">{t("Découvrir les bateaux")} <I.arrowR width="14" /></a>
                </div>
              ) : (
                <OffersGrid offers={shown} />
              )}
            </React.Fragment>
          )}

          <div className="odmp-note">
            {LANG === 'en'
              ? <><strong>How it works:</strong> each offer applies to a specific boat, date and time slot.
                An offer does not guarantee that the slot remains available — the first verified Interac deposit confirms the booking.
                Prices are set by BoatsFun or provided by the owner: no negotiation is required.</>
              : <><strong>Comment ça fonctionne :</strong> chaque offre s'applique à un bateau, une date et une plage horaire précis.
                Une offre ne garantit pas que le créneau demeure disponible — le premier dépôt Interac vérifié confirme la réservation.
                Les prix sont fixés par BoatsFun ou transmis par le propriétaire : aucune négociation n'est requise.</>}
          </div>
        </main>

        <window.BFFooter />
      </div>
    );
  }

  window.BFPageOffresDuMoment = BFPageOffresDuMoment;
})();