// FOOTPASS Messenger v2 · AGENDA : vues Mois & Année (zoom façon calendrier iOS)
// Liste ⇄ Mois ⇄ Année : pincement (trackpad/écran) ou boutons d'en-tête.
// L'app vit en juin 2026 · ancre : mercredi 18 juin.
const agvTX = (s) => (typeof TX === 'function' ? TX(s) : s);

// Les 12 mois de 2026 (cum = décalage de jours vs 1er juin, pour le jour de semaine)
const AGV_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const AGV_LABELS = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
const AGV_MONTHS = (() => {
  const cums = { 6: 0 };
  for (let m = 7; m <= 12; m++) cums[m] = cums[m - 1] + AGV_DAYS[m - 2];
  for (let m = 5; m >= 1; m--) cums[m] = cums[m + 1] - AGV_DAYS[m - 1];
  return Array.from({ length: 12 }, (_, i) => ({ n: i + 1, label: AGV_LABELS[i], days: AGV_DAYS[i], cum: cums[i + 1] }));
})();
const agvDowIdx = (m, d) => (((2 + AGV_MONTHS[m - 1].cum + d - 18) % 7) + 7) % 7; // 0 = Lun
const AGV_WD = { fr: ['L', 'M', 'M', 'J', 'V', 'S', 'D'], en: ['M', 'T', 'W', 'T', 'F', 'S', 'S'] };

const agvEvsOf = (events, m, d) => events.filter((e) => (e.m || 6) === m && (d == null || e.d === d));
const agvIsPastDay = (m, d) => m < 6 || (m === 6 && d < window.FP_CAL.todayD);

// ═══════ VUE MOIS ═══════
function MonthGridV2({ lang, m, events, selD, selM, onDay }) {
  const TH = window.FP_EV_THEMES;
  const M = AGV_MONTHS[m - 1];
  const off = agvDowIdx(m, 1);
  const cells = [...Array(off).fill(null), ...Array.from({ length: M.days }, (_, i) => i + 1)];
  while (cells.length % 7 !== 0) cells.push(null);
  const weeks = [];
  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
  // Semaine gardée visible quand le calendrier est resserré :
  // jour sélectionné > aujourd'hui > premier événement du mois > première semaine
  const weekOf = (d) => Math.floor((off + d - 1) / 7);
  const mEvs = agvEvsOf(events, m);
  let cur = 0;
  if (selD != null && (selM || 6) === m) cur = weekOf(selD);
  else if (m === 6) cur = weekOf(window.FP_CAL.todayD);
  else if (mEvs.length) cur = weekOf(Math.min.apply(null, mEvs.map((e) => e.d)));
  return (
    <div className="ag-mgridwrap">
      <div className="ag-mwd">{AGV_WD[lang === 'en' ? 'en' : 'fr'].map((w, i) => <span key={i}>{w}</span>)}</div>
      <div className="ag-mgrid">
        {weeks.map((wk, wi) => (
          <div key={wi} className={`ag-mweek ${wi === cur ? 'cur' : ''}`}>
            {wk.map((d, i) => {
              if (d == null) return <span key={'x' + i}></span>;
              const evs = agvEvsOf(events, m, d);
              const today = m === 6 && d === window.FP_CAL.todayD;
              const on = selD === d && (selM || 6) === m;
              return (
                <button key={d} className={`ag-mday ${today ? 'today' : ''} ${on ? 'on' : ''} ${agvIsPastDay(m, d) ? 'past' : ''}`} onClick={() => onDay(m, d)}>
                  <b>{d}</b>
                  <span className="ag-dots">
                    {evs.slice(0, 3).map((e, j) => <i key={j} style={{ background: TH[e.theme].c }}></i>)}
                  </span>
                </button>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}

// ═══════ VUE ANNÉE ═══════
function YearGridV2({ events, onMonth }) {
  return (
    <div className="ag-ygrid">
      {AGV_MONTHS.map((M) => {
        const has = agvEvsOf(events, M.n).length > 0;
        const cur = M.n === 6;
        const off = agvDowIdx(M.n, 1);
        return (
          <button key={M.n} className={`ag-ymon ${M.n < 6 ? 'past' : ''}`} onClick={() => onMonth(M.n)}>
            <h4 className={cur ? 'cur' : ''}>{agvTX(M.label)}{has ? <i></i> : null}</h4>
            <span className="ag-ymini">
              {[...Array(off)].map((_, i) => <span key={'x' + i}></span>)}
              {Array.from({ length: M.days }, (_, i) => i + 1).map((d) => (
                <span key={d} className={cur && d === window.FP_CAL.todayD ? 'today' : ''}>{d}</span>
              ))}
            </span>
          </button>
        );
      })}
    </div>
  );
}

// Pincement (deux doigts ou trackpad ctrl+molette) → in = plus proche, out = plus large
function agvBindPinch(el, onZoom) {
  let acc = 0; let cool = 0; let dist = 0; let locked = false;
  const fire = (dir) => { const t = Date.now(); if (t - cool > 450) { cool = t; onZoom(dir); } };
  const wheel = (e) => {
    if (!e.ctrlKey && !e.metaKey) return;
    e.preventDefault();
    acc += e.deltaY;
    if (acc > 52) { acc = 0; fire('out'); }
    else if (acc < -52) { acc = 0; fire('in'); }
  };
  const d2 = (e) => Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
  const ts = (e) => { if (e.touches.length === 2) { dist = d2(e); locked = false; } };
  const tm = (e) => {
    if (e.touches.length !== 2 || locked || !dist) return;
    e.preventDefault();
    const r = d2(e) / dist;
    if (r > 1.22) { locked = true; fire('in'); }
    else if (r < 0.82) { locked = true; fire('out'); }
  };
  const te = () => { dist = 0; };
  el.addEventListener('wheel', wheel, { passive: false });
  el.addEventListener('touchstart', ts, { passive: true });
  el.addEventListener('touchmove', tm, { passive: false });
  el.addEventListener('touchend', te, { passive: true });
  return () => {
    el.removeEventListener('wheel', wheel); el.removeEventListener('touchstart', ts);
    el.removeEventListener('touchmove', tm); el.removeEventListener('touchend', te);
  };
}

Object.assign(window, { MonthGridV2, YearGridV2, AGV_MONTHS, agvBindPinch });