import React, { useEffect, useState, useCallback } from 'react';
import './AFLDeparts.css';
import supabase from '../../../lib/supabase';
import MarqueeText from '../../../components/MarqueeText';

// Helper utilitaire : format HHhMM sans secondes (ex: 06h44)
const formatTimeNoSeconds = (v) => {
  if (v == null) return '';
  const tryDate = new Date(v);
  if (!isNaN(tryDate.getTime())) {
	const hh = String(tryDate.getHours()).padStart(2, '0');
	const mm = String(tryDate.getMinutes()).padStart(2, '0');
	return `${hh}h${mm}`;
  }
  if (typeof v === 'string') {
	const m = v.match(/(\d{1,2}):(\d{2})(?::\d{2})?/);
	if (m) return `${String(m[1]).padStart(2,'0')}h${m[2]}`;
	const m2 = v.match(/T(\d{2}):(\d{2})/);
	if (m2) return `${m2[1]}h${m2[2]}`;
	return v.slice(0,5).replace(':','h');
  }
  return String(v).slice(0,5).replace(':','h');
};

// (La fonction TrainType a été retirée car la colonne affiche désormais directement les
// informations via .train-meta dans la colonne .col-train-type)

function Clock(){
  const [now, setNow] = useState(new Date());
  useEffect(() => {
	const id = setInterval(() => setNow(new Date()), 1000);
	return () => clearInterval(id);
  }, []);

  const hh = String(now.getHours()).padStart(2, '0');
  const mm = String(now.getMinutes()).padStart(2, '0');
  const ss = String(now.getSeconds()).padStart(2, '0');

  return (
	<div className="aff-classiques-departs__clock-container" aria-hidden>
	  <div className="aff-classiques-departs__clock-box">
		<div className="aff-classiques-departs__clock-main">{hh}:{mm}</div>
		<div className="aff-classiques-departs__clock-seconds">{ss}</div>
	  </div>
	</div>
  );
}

export default function AFLDeparts(){
  // lire le paramètre de requête ?gare=Nom-de-la-gare
  const params = new URLSearchParams(window.location.search);
  const gareParam = params.get('gare');
  // support pour ?gare_id=123 ou ?gareId=123
  const gareIdParam = params.get('gare_id') || params.get('gareId');
  // gérer les +, décoder et remplacer les tirets par des espaces
  const gareDisplay = gareParam ? decodeURIComponent(String(gareParam).replace(/\+/g, ' ')).replace(/-/g, ' ') : null;

  // debug flag activable via ?debug=1 or ?debug=true
  const debugEnabled = (params.get('debug') === '1' || String(params.get('debug')).toLowerCase() === 'true');
  const debug = useCallback((...args) => { if (debugEnabled) console.debug(...args); }, [debugEnabled]);

  // État pour alterner l'affichage toutes les 3 secondes
  // eslint-disable-next-line no-unused-vars
  const [showStatus, setShowStatus] = useState(false); // Gardé pour éviter des warnings, mais non utilisé pour basculer
  // État pour l'heure actuelle, mise à jour chaque seconde pour la logique d'affichage du quai
  const [currentTime, setCurrentTime] = useState(new Date());

  // Met à jour l'heure actuelle chaque seconde
  useEffect(() => {
    const id = setInterval(() => setCurrentTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  // Données depuis Supabase
  const [horaires, setHoraires] = useState([]);
  const [allHoraires, setAllHoraires] = useState([]);
  const [perturbations, setPerturbations] = useState([]);
  // type de la gare affichée (valeurs attendues: 'interurbaine', 'ville', ...)
  const [stationType, setStationType] = useState(null);
  const [, setTravaux] = useState([]);
  const [, setTravauxSubstitutions] = useState([]);
  const [, setLoading] = useState(false);
  const [, setError] = useState(null);
  // debug des données brutes renvoyées par Supabase
  const [, setRawDebug] = useState({ count: 0, sample: [] });

  // Récupérer le type de gare une seule fois au montage ou quand les paramètres changent
  useEffect(() => {
    let mounted = true;
    const fetchStationType = async () => {
      try {
        let fetchedType = null;
        if (gareIdParam) {
          const { data: gdata, error: gerr } = await supabase.from('gares').select('id,type').eq('id', gareIdParam).limit(1);
          if (!gerr && gdata && gdata.length) fetchedType = gdata[0] && gdata[0].type;
        } else if (gareDisplay) {
          const flexNeedle = `%${String(gareDisplay).replace(/[-_+\s]+/g, '%')}%`;
          const { data: gdata, error: gerr } = await supabase.from('gares').select('id,type,nom').ilike('nom', flexNeedle);
          if (!gerr && gdata && gdata.length) {
            const exactMatch = gdata.find(g => {
              const n1 = String(g.nom || '').normalize('NFD').replace(/\p{M}/gu, '').toLowerCase().replace(/[-_+\s]+/g, ' ').trim();
              const n2 = String(gareDisplay || '').normalize('NFD').replace(/\p{M}/gu, '').toLowerCase().replace(/[-_+\s]+/g, ' ').trim();
              return n1 === n2;
            });
            fetchedType = exactMatch ? exactMatch.type : gdata[0].type;
          }
        }
        if (mounted) {
          setStationType(fetchedType ? String(fetchedType).toLowerCase() : null);
        }
      } catch (e) { /* ignore */ }
    };
    if (supabase) {
      fetchStationType();
    }
    return () => { mounted = false; };
  }, [gareIdParam, gareDisplay]);

  // --- Helpers pour perturbations (définis ici pour éviter use-before-define dans useEffect) ---
  const normalizeName = useCallback((s) => {
	if (!s) return '';
	try {
	  const t = String(s).normalize('NFD').replace(/\p{M}/gu, '').toLowerCase().trim();
	  return t.replace(/[-_]+/g, ' ').replace(/\s+/g, ' ');
	} catch (e) {
	  return String(s).toLowerCase().trim();
	}
  }, []);

  const safeParseArrets = useCallback((p) => {
  const raw = p && (p.perturbations_arrets || p.arrets || p.arrets_perturbations);
  if (!raw) return [];
  if (Array.isArray(raw)) return raw;
  try {
	const parsed = JSON.parse(raw);
	// some payloads wrap { arrets: [...], jours_perturbation: [...] }
	if (parsed && typeof parsed === 'object') {
	if (Array.isArray(parsed.arrets)) return parsed.arrets;
	// if parsed itself is an array-like object, return it
	return parsed;
	}
	return [];
  } catch (e) { return []; }
  }, []);

  // Retourne la liste d'arrêts d'un horaire, supporte plusieurs noms de champs (stops, gares_desservies...)
  const getStops = useCallback((h) => {
	if (!h) return [];
	if (Array.isArray(h.stops) && h.stops.length) return h.stops;
	if (Array.isArray(h.gares_desservies) && h.gares_desservies.length) return h.gares_desservies;
	if (Array.isArray(h.garesDesservies) && h.garesDesservies.length) return h.garesDesservies;
	// parfois la colonne est stockée sous forme de chaîne JSON
	const candidates = ['stops','gares_desservies','garesDesservies','gares_desservies_json'];
	for (const key of candidates) {
	  const raw = h[key];
	  if (!raw) continue;
	  if (Array.isArray(raw)) return raw;
	  if (typeof raw === 'string') {
		try { const parsed = JSON.parse(raw); if (Array.isArray(parsed)) return parsed; } catch (e) { /* ignore */ }
	  }
	}
	return [];
  }, []);

  // parse perturbations_arrets as object to extract both arrets and jours_perturbation
  const parsePerturbArretsObject = useCallback((p) => {
	const raw = p && (p.perturbations_arrets || p.arrets || p.arrets_perturbations);
	if (!raw) return { arrets: [], jours: null };
	if (typeof raw === 'object') {
	  if (Array.isArray(raw.arrets)) return { arrets: raw.arrets, jours: raw.jours_perturbation || raw.jours || null };
	  if (Array.isArray(raw)) return { arrets: raw, jours: null };
	  return { arrets: [], jours: null };
	}
	try {
	  const parsed = JSON.parse(raw);
	  if (parsed && typeof parsed === 'object') {
		return { arrets: Array.isArray(parsed.arrets) ? parsed.arrets : (Array.isArray(parsed) ? parsed : []), jours: parsed.jours_perturbation || parsed.jours || null };
	  }
	  return { arrets: [], jours: null };
	} catch (e) {
	  return { arrets: [], jours: null };
	}
  }, []);

  // extrait un set de dates 'YYYY-MM-DD' depuis p.jours_perturbation (top-level) ou depuis perturbations_arrets.jours_perturbation
  const getPerturbationJours = useCallback((p) => {
	if (!p) return null;
	// check top-level field first
	const candidate = p.jours_perturbation || p.jours || null;
	const result = new Set();
	const pushDate = (d) => {
	  if (!d) return;
	  try {
		const dd = new Date(d);
		if (!isNaN(dd.getTime())) result.add(dd.toISOString().slice(0,10));
	  } catch (e) {}
	};
	if (candidate) {
	  if (Array.isArray(candidate)) {
		candidate.forEach(item => pushDate(item.date || item));
	  } else if (typeof candidate === 'string') {
		try { const parsed = JSON.parse(candidate); if (Array.isArray(parsed)) parsed.forEach(it => pushDate(it.date || it)); }
		catch (e) { pushDate(candidate); }
	  } else if (typeof candidate === 'object') {
		if (Array.isArray(candidate)) candidate.forEach(it => pushDate(it.date || it));
		else pushDate(candidate.date || null);
	  }
	}
	// fallback: inspect perturbations_arrets object
	try {
	  const parsedObj = parsePerturbArretsObject(p);
	  const jp = parsedObj.jours;
	  if (jp) {
		if (Array.isArray(jp)) jp.forEach(it => pushDate(it.date || it));
		else if (typeof jp === 'string') {
		  try { const parsed = JSON.parse(jp); if (Array.isArray(parsed)) parsed.forEach(it => pushDate(it.date || it)); } catch (e) { pushDate(jp); }
		} else if (typeof jp === 'object') pushDate(jp.date || null);
	  }
	} catch (e) {}

	return result.size ? result : null;
  }, [parsePerturbArretsObject]);

  const parseDelayMinutesFromArret = useCallback((arret) => {
	if (!arret) return null;
	const keys = ['retard_minutes','retard','delay_minutes','delay','retard_min'];
	for (const k of keys) {
	  if (typeof arret[k] !== 'undefined' && arret[k] !== null && arret[k] !== '') {
		const n = Number(arret[k]);
		if (!isNaN(n)) return Math.round(n);
	  }
	}
	return null;
  }, []);

  // parse HH:mm or ISO into minutes since midnight (utilisable ailleurs dans le composant)
  const parseTimeHM = useCallback((s) => {
	if (!s) return null;
	if (typeof s === 'number') return s;
	const m = String(s).match(/(\d{1,2}):(\d{2})/);
	if (m) return parseInt(m[1],10)*60 + parseInt(m[2],10);
	const d = new Date(s);
	if (!isNaN(d.getTime())) return d.getHours()*60 + d.getMinutes();
	return null;
  }, []);

  // retourne le threshold (en minutes) pour afficher le quai selon le type de gare
  const thresholdForStationType = useCallback((type) => {
	if (!type) return 30;
	const t = String(type).trim().toLowerCase();
	if (t === 'interurbaine' || t.includes('interurb')) return 360; // 6 heures
	if (t === 'ville' || t.includes('ville')) return 30; // 30 minutes
	return 30; // 30 minutes par défaut
  }, []);

  const formatTimeFromHM = useCallback((totalMinutes) => {
	if (typeof totalMinutes !== 'number' || isNaN(totalMinutes)) return '';
	const m = ((totalMinutes % 1440) + 1440) % 1440;
	const hh = String(Math.floor(m / 60)).padStart(2, '0');
	const mm = String(m % 60).padStart(2, '0');
	return `${hh}h${mm}`;
  }, []);

  // buildPerturbMap now accepts an optional list of horaires to link horaire_id -> numero_train
  const buildPerturbMap = useCallback((list = perturbations, horairesList = allHoraires) => {
	const idx = { byHoraire: {}, byNumber: {}, byStopId: {}, byStopName: {}, global: [] };
	(list || []).forEach(p => {
	  const horaireId = p.horaire_id || p.horaire || p.horaireId || p.horaireID;
	  if (horaireId != null) { const k = String(horaireId); idx.byHoraire[k] = idx.byHoraire[k] || []; idx.byHoraire[k].push(p); }
	  const number = p.number || p.train_number || p.train || p.numero || p.numero_train;
	  if (number != null) { const kn = String(number); idx.byNumber[kn] = idx.byNumber[kn] || []; idx.byNumber[kn].push(p); }
	  const arrets = safeParseArrets(p);
	  if (Array.isArray(arrets) && arrets.length) {
		arrets.forEach(a => {
		  const stopId = a.gare_id || a.gareId || a.id || a.station_id || a.stationId || a.uic || a.code_uic || a.gare_uic || a.code;
		  const stopName = a.gare_nom || a.nom || a.name || a.station_name || a.station_nom;
		  if (stopId != null) { const ks = String(stopId); idx.byStopId[ks] = idx.byStopId[ks] || []; idx.byStopId[ks].push({ perturbation: p, arret: a }); }
		  if (stopName) { const key = normalizeName(stopName); idx.byStopName[key] = idx.byStopName[key] || []; idx.byStopName[key].push({ perturbation: p, arret: a }); }
		});
	  }
	  if ((horaireId == null && number == null && (!Array.isArray(arrets) || !arrets.length))) { idx.global.push(p); }
	});

	// If we have horairesList, propagate horaire_id perturbations to byNumber using the matching horaire's numero_train
	if (Array.isArray(horairesList) && horairesList.length) {
	  try {
		const byH = Object.keys(idx.byHoraire || {});
		if (byH && byH.length) {
		  for (const hid of byH) {
			const h = horairesList.find(x => String(x.id || x.horaire_id || x.horaireId || x.numero) === String(hid));
			if (h) {
			  const num = h.numero_train || h.number || h.numero || null;
			  if (num != null) {
				const numKey = String(num);
				idx.byNumber[numKey] = idx.byNumber[numKey] || [];
				// append all perturbations that reference this horaire id
				(idx.byHoraire[hid] || []).forEach(p => idx.byNumber[numKey].push(p));
			  }
			}
		  }
		}
	  } catch (e) {
		// ignore mapping errors
	  }
	}

	return idx;
  }, [perturbations, allHoraires, safeParseArrets, normalizeName]);


  const findPerturbsForHoraireAndStop = useCallback((horaire, stationId, stationName, idx) => {
	const res = [];
	const map = idx || buildPerturbMap();
				try { debug('findPerturbsForHoraireAndStop', { horaireId: horaire && (horaire.id || horaire.horaire_id), numero: horaire && (horaire.numero_train || horaire.numero), stationId, stationName, counts: { byHoraire: Object.keys(map.byHoraire||{}).length, byNumber: Object.keys(map.byNumber||{}).length } }); } catch (e) {}
	const hId = horaire && (horaire.id || horaire.horaire_id || horaire.numero || horaire.numero_train);
	const number = horaire && (horaire.numero_train || horaire.number || horaire.numero || horaire.train_number);
	if (hId != null) {
	  const kh = String(hId);
	  if (map.byHoraire && map.byHoraire[kh]) res.push(...map.byHoraire[kh]);
	}
	if (number != null) {
	  const kn = String(number);
	  if (map.byNumber && map.byNumber[kn]) res.push(...map.byNumber[kn]);
	}
	if (stationId != null) {
	  const ks = String(stationId);
	  if (map.byStopId && map.byStopId[ks]) map.byStopId[ks].forEach(x => res.push(x.perturbation));
	}
	if (stationName && map.byStopName) {
	  const key = normalizeName(stationName);
	  if (map.byStopName[key]) map.byStopName[key].forEach(x => res.push(x.perturbation));

	  // recherche permissive : accepter les clés qui contiennent ou sont contenues par le needle
	  try {
		const needle = key;
		for (const existingKey of Object.keys(map.byStopName || {})) {
		  if (existingKey === needle) continue;
		  if (existingKey.includes(needle) || needle.includes(existingKey)) {
			map.byStopName[existingKey].forEach(x => res.push(x.perturbation));
		  }
		}
	  } catch (e) {
		// ignore
	  }
	}
	return Array.from(new Set(res));
  }, [buildPerturbMap, normalizeName, debug]);


  // serviceDate (YYYY-MM-DD) optional: forces the evaluation date for perturbations when horaire._date is missing
  // serviceDate (YYYY-MM-DD) optional: forces the evaluation date for perturbations when horaire._date is missing
  const computeStatusForHoraireAtStop = useCallback((horaire, stationId, stationName, idx, serviceDate = null) => {
    const map = idx || buildPerturbMap();
    const allPerturbs = [];
    const hId = horaire && (horaire.id || horaire.horaire_id || horaire.numero || horaire.numero_train);
    const number = horaire && (horaire.numero_train || horaire.number || horaire.numero || horaire.train_number);
    
    if (map) {
      const addedIds = new Set();
      const addP = (p) => {
        if (p && !addedIds.has(p.id)) {
          addedIds.add(p.id);
          allPerturbs.push(p);
        }
      };
      if (hId != null && map.byHoraire && map.byHoraire[String(hId)]) {
        map.byHoraire[String(hId)].forEach(addP);
      }
      if (number != null && map.byNumber && map.byNumber[String(number)]) {
        map.byNumber[String(number)].forEach(addP);
      }
      if (stationId != null && map.byStopId && map.byStopId[String(stationId)]) {
        map.byStopId[String(stationId)].forEach(x => addP(x.perturbation));
      }
      if (stationName && map.byStopName) {
        const key = normalizeName(stationName);
        if (map.byStopName[key]) map.byStopName[key].forEach(x => addP(x.perturbation));
        for (const existingKey of Object.keys(map.byStopName)) {
          if (existingKey.includes(key) || key.includes(existingKey)) {
            map.byStopName[existingKey].forEach(x => addP(x.perturbation));
          }
        }
      }
      const trainStops = getStops(horaire);
      if (Array.isArray(trainStops)) {
        trainStops.forEach(s => {
          const sId = s.gare_id || s.gareId || s.id || s.code;
          const sName = s.gare_nom || s.nom || s.name || s.stop_name;
          if (sId != null && map.byStopId && map.byStopId[String(sId)]) {
            map.byStopId[String(sId)].forEach(x => addP(x.perturbation));
          }
          if (sName && map.byStopName) {
            const skey = normalizeName(sName);
            if (map.byStopName[skey]) map.byStopName[skey].forEach(x => addP(x.perturbation));
          }
        });
      }
      if (map.global) {
        map.global.forEach(addP);
      }
    }

    const toYMD = (v) => { if (!v) return null; const d = new Date(v); if (isNaN(d.getTime())) return null; return d.toISOString().slice(0, 10); };
    let horaireYmd = toYMD(horaire && (horaire._date || horaire.date || horaire.date_service || horaire.service_date));
    if (!horaireYmd && serviceDate) horaireYmd = serviceDate;

    let maxDelay = null;
    let isSuppressed = false;

    for (const p of allPerturbs) {
      try {
        if (horaireYmd) {
          const pDate = toYMD(p.date || p.date_service);
          const db = toYMD(p.date_debut || p.start_date);
          const df = toYMD(p.date_fin || p.end_date);
          if (pDate && pDate !== horaireYmd) continue;
          if (db && df && !(horaireYmd >= db && horaireYmd <= df)) continue;
        }
      } catch (e) {}
      try {
        const joursSet = getPerturbationJours(p);
        if (joursSet && horaireYmd && !joursSet.has(horaireYmd)) continue;
      } catch (e) {}

      const ref = p.horaire_id || p.horaire || p.horaireId || p.numero_train || p.train_number || p.numero;
      const numberRef = p.number || p.train_number || p.numero || p.numero_train;
      const appliesByRef = ref && (String(ref) === String(horaire.id) || String(ref) === String(horaire.numero_train) || String(ref) === String(horaire.numero));
      const appliesByNumber = numberRef && (String(numberRef) === String(horaire.numero_train) || String(numberRef) === String(horaire.numero) || String(numberRef) === String(horaire.number));
      
      const parsedObj = parsePerturbArretsObject(p) || { arrets: [], jours: null };
      const arrets = parsedObj.arrets || [];

      const trainStops = getStops(horaire);
      let trainStopMatch = false;

      const matchesTarget = (a) => {
        if (!stationName && stationId == null) return false;
        const aId = a.gare_id || a.gareId || a.id || a.station_id || a.stationId || a.uic || a.code;
        const aName = a.gare_nom || a.nom || a.name || a.station_name || a.station_nom;
        if (stationId != null && String(aId) === String(stationId)) return true;
        if (stationName && aName) {
          const na = normalizeName(aName);
          const ns = normalizeName(stationName);
          return na === ns;
        }
        return false;
      };

      for (const a of arrets) {
        const aId = a.gare_id || a.gareId || a.id || a.uic || a.code;
        const aName = a.gare_nom || a.nom || a.name || a.station_name || a.station_nom;
        const na = normalizeName(aName || '');

        const isTarget = matchesTarget(a);
        let isTrainStop = false;
        if (trainStops && Array.isArray(trainStops)) {
          isTrainStop = trainStops.some(s => {
            const sId = s.gare_id || s.gareId || s.id || s.code;
            const sName = s.gare_nom || s.nom || s.name || s.stop_name;
            if (sId != null && aId != null && String(sId) === String(aId)) return true;
            if (sName && aName) {
              const ns = normalizeName(sName);
              return ns === na;
            }
            return false;
          });
        }
        const originName = normalizeName(horaire.gare_depart_nom || horaire.gare_depart || '');
        const destName = normalizeName(horaire.gare_arrivee_nom || horaire.gare_arrivee || '');
        if (originName === na || destName === na) isTrainStop = true;

        if (isTrainStop) trainStopMatch = true;

        if (isTarget) {
          const t = (a.type_perturbation || a.type || '').toString().toLowerCase();
          if (t.includes('arret_supprime') || /suppressed|supprim/.test(t)) {
            isSuppressed = true;
          }
        }
      }

      const isGlobal = (arrets.length === 0) && !ref && !numberRef;
      const applies = appliesByRef || appliesByNumber || trainStopMatch || isGlobal;

      if (applies) {
        const t = (p.type_perturbation || p.type || '').toString().toLowerCase();
        if (t.includes('arret_supprime') || /suppressed|supprim/.test(t)) {
          isSuppressed = true;
        }

        for (const a of arrets) {
          const tType = (a.type_perturbation || a.type || '').toString().toLowerCase();
          if (tType.includes('retard') || tType.includes('delay') || /retard/.test(tType)) {
            const d = parseDelayMinutesFromArret(a) || parseDelayMinutesFromArret(p) || 0;
            if (maxDelay == null || d > maxDelay) maxDelay = d;
          }
        }
        if (t.includes('retard') || t.includes('delay') || /retard/.test(t)) {
          const d = parseDelayMinutesFromArret(p) || 0;
          if (maxDelay == null || d > maxDelay) maxDelay = d;
        }
      }
    }

    if (isSuppressed) return { label: 'supprimé', detail: '', delayMinutes: null };
    if (maxDelay != null) return { label: `retardé +${maxDelay}min.`, detail: '', delayMinutes: maxDelay };
    return { label: "à l'heure", detail: '', delayMinutes: null };
  }, [buildPerturbMap, getPerturbationJours, parsePerturbArretsObject, parseDelayMinutesFromArret, normalizeName, getStops]);

  // Applique les perturbations à une liste d'horaires : calcule status par arrêt et met à jour l'heure affichée
  const applyPerturbationsToHoraires = useCallback((list = [], perturbList = [], displayStationId = null, displayStationName = null, serviceDate = null) => {
	const map = buildPerturbMap(perturbList || []);
    // fallback to global display station context
    const targetStationId = displayStationId || gareIdParam || null;
    const targetStationName = displayStationName || gareDisplay || null;

		  return (list || []).map(h => {
		  const horaire = { ...h };
					  const stops = getStops(horaire);
	  const stopsStatus = [];
	  for (let i = 0; i < stops.length; i++) {
		const s = stops[i] || {};
		const stationId = s.gare_id || s.gareId || s.id || s.station_id || s.stationId || s.uic || s.code;
		const stationName = s.gare_nom || s.nom || s.name || s.station_name || s.station_nom;
						const st = computeStatusForHoraireAtStop(horaire, stationId, stationName, map, serviceDate);
		stopsStatus.push({ stationId, stationName, status: st });
	  }

      // compute display time using delay at the display station if any
	  const displayStatus = computeStatusForHoraireAtStop(horaire, targetStationId, targetStationName, map, serviceDate);
	  let displayTime = horaire._displayTime || formatTimeNoSeconds(horaire.heure_depart || horaire.time || horaire.heure || '');
	  horaire._stopsStatus = stopsStatus;
	  // prefer platform from stop data (quai) if available
	  const stopForStation = (stops || []).find(s => {
		const sid = s.gare_id || s.gareId || s.id || s.stop_id || s.stopId || null;
		const nm = s.gare_nom || s.nom || s.name || s.stop_name || '';
		const ns = normalizeName(nm || '');
		const target = normalizeName(targetStationName || '');
		return (targetStationId && String(sid) === String(targetStationId)) || (targetStationName && ns === target);
	  }) || null;
	  horaire._status = displayStatus;
	  horaire._displayTime = displayTime;
	  const platformVal = (stopForStation && (stopForStation.quai_reel || stopForStation.quai || stopForStation.quai_prevu || stopForStation.platform)) || horaire.quai_reel || horaire.quai || horaire.quai_prevu || horaire.platform || '';
	  horaire._displayPlatform = String(platformVal).trim();
	  return horaire;
	});
  }, [buildPerturbMap, computeStatusForHoraireAtStop, gareDisplay, gareIdParam, getStops, normalizeName]);

  useEffect(() => {
	const id = setInterval(() => setShowStatus(s => !s), 3000);
	return () => clearInterval(id);
  }, []);

  // Récupération Supabase — maintenant avec polling pour synchroniser sans recharger la page
  useEffect(() => {
    let mounted = true;
    let inFlight = false; // empêche les fetchs concurrents

    const fetchData = async () => {
	  if (!mounted) return;
	  if (inFlight) return; // éviter les appels simultanés si le fetch précédent n'est pas terminé
	  inFlight = true;
	  if (!supabase) {
		// Supabase non initialisé — avertir et définir un message d'erreur pour l'UI
		// eslint-disable-next-line no-console
		console.warn('Supabase non initialisé — vérifiez REACT_APP_SUPABASE_URL et REACT_APP_SUPABASE_ANON_KEY');
		setError('Supabase non initialisé — vérifiez les variables d\'environnement');
		setLoading(false);
		inFlight = false;
		return;
	  }
	  setLoading(true);
	  setError(null);
	  try {
		const [{ data: horairesData, error: hError }, { data: perturbData, error: pError }, { data: travauxData, error: tError }, { data: travauxSubstData }] = await Promise.all([
		  supabase.from('horaires').select('id, *'),
		  supabase.from('perturbations').select('*'),
		  supabase.from('travaux').select('*'),
		  supabase.from('travaux_substitutions').select('*')
		]);

		if (!mounted) { inFlight = false; return; }

		if (hError || pError || tError) {
		  if (mounted) setError((hError || pError || tError).message || String(hError || pError || tError));
		  setLoading(false);
		  inFlight = false;
		  return;
		}

		// debug: afficher ce que Supabase retourne
		// eslint-disable-next-line no-console
								debug('Supabase horaires fetched', { count: (horairesData || []).length, sample: (horairesData || []).slice(0,5) });
		if (mounted) setRawDebug({ count: (horairesData || []).length, sample: (horairesData || []).slice(0,3) });

		// conserver la liste complète telle que renvoyée par la BDD (avant filtrage par gare)
		let parsedHoraires = (horairesData || []).map(h => h || {});

		// Certains champs (comme stops) peuvent arriver en tant que chaîne JSON depuis la BDD;
		// essayer de parser pour garantir que stops est un tableau utilisable.
		parsedHoraires = parsedHoraires.map(h => {
		  try {
			if (h && typeof h.stops === 'string') {
			  const parsed = JSON.parse(h.stops);
			  if (Array.isArray(parsed)) {
				return { ...h, stops: parsed };
			  }
			}
		  } catch (e) {
			// ignore parse error
		  }
		  return h;
		});

		// debug: afficher après normalisation
								// eslint-disable-next-line no-console
								debug('Supabase horaires normalized', { count: parsedHoraires.length, sampleStopsExample: (parsedHoraires[0] && parsedHoraires[0].stops) || null });

		// stocker la liste complète (non filtrée) pour associer horaire_id -> numero_train
        if (mounted) setAllHoraires(parsedHoraires || []);
		// Filtrer par gare : garder uniquement les horaires qui DESSERVENT la gare ciblée
		// (soit comme gare_depart, soit comme un arrêt intermédiaire dans `stops` / `gares_desservies`)
		// Exclure les horaires pour lesquels la gare ciblée est la gare d'arrivée finale (terminus)
		let displayHoraires = parsedHoraires.slice();
		if (gareDisplay) {
		  const normalized = normalizeName(String(gareDisplay).replace(/-/g, ' '));
		  displayHoraires = displayHoraires.filter(h => {
			// Exclure si la gare ciblée est la gare d'arrivée finale
			const destName = normalizeName((h.gare_arrivee_nom || h.gare_arrivee || '').toString());
			if (destName === normalized) return false;

			// Inclure si gare de départ correspond
			const departName = normalizeName((h.gare_depart_nom || h.gare_depart_name || h.gare_depart || '').toString());
			if (departName === normalized) return true;

			// Chercher dans les arrêts desservis ; ignorer si l'arrêt est le terminus (isLast ou index==max)
			const stopsList = getStops(h);
			if (Array.isArray(stopsList) && stopsList.length) {
			  let maxIdx = null;
			  for (const st of stopsList) {
				if (typeof st.index !== 'undefined' && st.index !== null) {
				  const n = Number(st.index);
				  if (!Number.isNaN(n)) maxIdx = maxIdx == null ? n : Math.max(maxIdx, n);
				}
			  }
			  for (const s of stopsList) {
				const stopName = normalizeName((s.gare_nom || s.nom || s.name || s.stop_name || '').toString());
				if (!stopName) continue;
				const isTerminus = Boolean(s.isLast || s.is_last || (typeof s.index !== 'undefined' && maxIdx != null && Number(s.index) === maxIdx));
				if (isTerminus) continue;
				if (stopName === normalized) return true;
			  }
			}
			return false;
		  });
		} else if (gareIdParam) {
		  const gid = String(gareIdParam);
		  displayHoraires = displayHoraires.filter(h => {
			// Exclure si gare d'arrivée finale correspond
			const destId = (h.gare_arrivee_id || h.gare_arrivee || null);
			if (destId != null && String(destId) === gid) return false;

			// Inclure si gare de départ correspond
			const departId = h.gare_depart_id || h.gare_id || h.origin_id || null;
			if (departId != null && String(departId) === gid) return true;

			// Chercher dans les arrêts desservis (ignorer terminus)
			const stopsList = getStops(h);
			if (Array.isArray(stopsList) && stopsList.length) {
			  let maxIdx = null;
			  for (const st of stopsList) {
				if (typeof st.index !== 'undefined' && st.index !== null) {
				  const n = Number(st.index);
				  if (!Number.isNaN(n)) maxIdx = maxIdx == null ? n : Math.max(maxIdx, n);
				}
			  }
			  for (const s of stopsList) {
				const stopId = s.gare_id || s.gareId || s.id || s.stop_id || s.stopId || null;
				if (stopId == null) continue;
				const isTerminus = Boolean(s.isLast || s.is_last || (typeof s.index !== 'undefined' && maxIdx != null && Number(s.index) === maxIdx));
				if (isTerminus) continue;
				if (String(stopId) === gid) return true;
			  }
			}
			return false;
		  });
		}

		// Normaliser date de service (si présente)
		const dateKeys = ['date_depart','date','jour','service_date','date_service','date_dep'];
		const normalizeDate = (o) => {
		  for (const k of dateKeys) {
			if (!o) continue;
			const v = o[k];
			if (!v) continue;
			const d = new Date(v);
			if (!isNaN(d.getTime())) return d.toISOString().slice(0,10);
		  }
		  return null;
		};

		const withDates = displayHoraires.map(h => ({ ...h, _date: normalizeDate(h) }));

					// parse HH:mm or HH:MM:SS into minutes since midnight
					const parseTimeHM = (s) => {
						if (!s) return null;
						if (typeof s === 'number') return s;
						const m = String(s).match(/(\d{1,2}):(\d{2})/);
						if (m) return parseInt(m[1],10)*60 + parseInt(m[2],10);
						const d = new Date(s);
						if (!isNaN(d.getTime())) return d.getHours()*60 + d.getMinutes();
						return null;
					};

					// enrichir withDates avec heures en minutes pour aujourd'hui et demain
					const now = new Date();
					const todayHM = now.getHours()*60 + now.getMinutes();
					const enrich = withDates.map(h => {
																		let raw = h.heure_depart || h.time || h.heure || '';
																		// si stops contient la gare ciblée, préférer son heure
																		const stopsListForH = getStops(h);
																		if ((gareIdParam || gareDisplay) && Array.isArray(stopsListForH)) {
																		  const byId = gareIdParam ? stopsListForH.find(s => String(s.gare_id || s.gareId || s.id) === String(gareIdParam)) : null;
																		  const byName = gareDisplay ? stopsListForH.find(s => normalizeName((s.gare_nom || s.nom || s.name || '').toString()) === normalizeName(gareDisplay)) : null;
																		  const stop = byId || byName;
																		  if (stop && (stop.heure_depart || stop.time || stop.heure)) raw = stop.heure_depart || stop.time || stop.heure;
																		}
						const depHM = parseTimeHM(raw);
						const displayTime = formatTimeNoSeconds(raw);
						return { ...h, _rawTime: raw, _depHM: depHM, _displayTime: displayTime };
					});


		// fonctions utilitaires de jours
		const pad = (n) => String(n).padStart(2,'0');
		const localDateStr = (d) => `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`;
		const today = new Date();
		const todayStr = localDateStr(today);
		const tomorrow = new Date(today);
		tomorrow.setDate(today.getDate()+1);
		const tomorrowStr = localDateStr(tomorrow);

		const weekdayIndex = (d) => d.getDay(); // 0 dimanche .. 6 samedi
		const weekdayNameForColumn = (d) => {
		  const i = weekdayIndex(d);
		  switch(i) {
			case 1: return 'circule_lundi';
			case 2: return 'circule_mardi';
			case 3: return 'circule_mercredi';
			case 4: return 'circule_jeudi';
			case 5: return 'circule_vendredi';
			case 6: return 'circule_samedi';
			case 0: return 'circule_dimanche';
			default: return null;
		  }
		};

		const isPublicHoliday = (d) => {
		  const y = d.getFullYear();
		  const m = d.getMonth() + 1;
		  const day = d.getDate();
		  const s = `${y}-${String(m).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
		  const holidays = [
			`${y}-01-01`, // Jour de l'an
			`${y}-05-01`, // Fête du Travail
			`${y}-05-08`, // Victoire 1945
			`${y}-07-14`, // Fête nationale
			`${y}-08-15`, // Assomption
			`${y}-11-01`, // Toussaint
			`${y}-11-11`, // Armistice 1918
			`${y}-12-25`, // Noël
		  ];
		  // Dates variables pour 2026
		  if (y === 2026) {
			holidays.push('2026-04-06'); // Lundi de Pâques
			holidays.push('2026-05-14'); // Ascension
			holidays.push('2026-05-25'); // Lundi de Pentecôte
		  }
		  return holidays.includes(s);
		};

		const parseCirculationFlag = (value, defaultValue) => {
			if (value === null || typeof value === 'undefined') {
				return defaultValue;
			}
			if (typeof value === 'boolean') {
				return value;
			}
			if (typeof value === 'number') {
				return value === 1;
			}
			if (typeof value === 'string') {
				const s = value.trim().toLowerCase();
				if (['true', '1', 't', 'y', 'yes', 'oui'].includes(s)) {
					return true;
				}
				if (['false', '0', 'f', 'n', 'no', 'non'].includes(s)) {
					return false;
				}
			}
			return defaultValue;
		};

		const circulatesOn = (h, d) => {
		  if (isPublicHoliday(d)) {
			// On public holidays, circulation is determined SOLELY by `circule_jours_feries`.
			// If the flag is true, it runs. Otherwise, it doesn't.
			return parseCirculationFlag(h['circule_jours_feries'], false);
		  }
		  
		  // On a regular day, check the corresponding weekday column.
		  const col = weekdayNameForColumn(d);
		  if (!col) return true; // Should not happen, but permissive.
		  
		  // For regular weekdays, the default is to run unless specified otherwise.
		  return parseCirculationFlag(h[col], true);
		};

		// Construire listes pour aujourd'hui et demain en tenant compte des colonnes circule_*
		// Calculer les travaux applicables et les substitutions
		const travauxList = travauxData || [];
		const travauxSubstList = travauxSubstData || [];

		const parseDateOnly = (v) => {
		  if (!v) return null;
		  const d = new Date(v);
		  if (isNaN(d.getTime())) return null;
		  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
		};

		const parseJoursTravaux = (val) => {
		  if (val == null) return null;
		  if (Array.isArray(val)) return new Set(val.map(x => String(x).toLowerCase()));
		  const s = String(val || '');
		  const parts = s.split(/[,;\s]+/).map(p => p.trim()).filter(Boolean);
		  return parts.length ? new Set(parts.map(p => p.toLowerCase())) : null;
		};

		const weekdayShort = (i) => {
		  switch(i) { case 0: return 'dim'; case 1: return 'lun'; case 2: return 'mar'; case 3: return 'mer'; case 4: return 'jeu'; case 5: return 'ven'; case 6: return 'sam'; default: return null; }
		};

		const travauxApplies = (t, h, date) => {
		  if (!t) return false;
		  const db = parseDateOnly(t.date_debut || t.dateDebut || t.start_date);
		  const df = parseDateOnly(t.date_fin || t.dateFin || t.end_date);
		  if (!db || !df) return false;
		  const d = new Date(date.getFullYear(), date.getMonth(), date.getDate());
		  if (d < db || d > df) return false;
		  const joursSet = parseJoursTravaux(t.jours_travaux || t.jours || t.days);
		  if (joursSet) {
			const name = weekdayShort(d.getDay());
			if (!name) return false;
			let ok = false;
			for (const v of joursSet) { if (v.includes(name) || name.includes(v)) { ok = true; break; } }
			if (!ok) return false;
		  }
		  const startHM = parseTimeHM(t.heure_debut || t.heureDebut || t.start_time);
		  const endHM = parseTimeHM(t.heure_fin || t.heureFin || t.end_time);
		  if (startHM == null || endHM == null) return true;
		  if (typeof h._depHM === 'number') return h._depHM >= startHM && h._depHM <= endHM;
		  return false;
		};

		const isSubstitution = (h) => {
		  if (!h) return false;
		  return travauxSubstList.some(ts => String(ts.horaire_id) === String(h.id) || String(ts.horaire_id) === String(h.numero_train) || String(ts.horaire_id) === String(h.numero));
		};

		// compute linkage and travaux applicability per horaire
		const enriched = enrich.map(h => {
		  let linked = false;
		  let appliesToday = false;
		  let appliesTomorrow = false;
		  for (const t of travauxList) {
			// Extraire identifiants de ligne (différentes variantes possibles)
			const tLine = t.ligne_id || t.ligne || t.line_id || t.line || t.ligneId || t.lineId;
			const hLine = h.ligne_id || h.ligne || h.line_id || h.line || h.ligneId || h.lineId;

			// Si le travail a une ligne attribuée, n'appliquer le travail QUE si la ligne correspond
			// (si hLine est absent on considère qu'on ne peut pas appliquer ce travail à cet horaire)
			if (typeof tLine !== 'undefined' && tLine !== null) {
			  if (typeof hLine === 'undefined' || hLine === null) {
				// pas de ligne sur l'horaire -> ignorer ce travail pour cet horaire
				continue;
			  }
			  if (String(tLine) !== String(hLine)) {
				// lignes différentes -> ignorer ce travail pour cet horaire
				continue;
			  }
			}

			const ref = t.horaire_id || t.horaire || t.horaireId || t.numero_train || t.train_number || t.numero;
			if (ref && (String(ref) === String(h.id) || String(ref) === String(h.numero_train) || String(ref) === String(h.numero))) linked = true;
			
			// Si l'horaire est explicitement listé dans travaux_substitutions pour CE travail, on le link
			const substForThisTravail = travauxSubstList.some(ts => String(ts.travaux_id) === String(t.id) && (String(ts.horaire_id) === String(h.id) || String(ts.horaire_id) === String(h.numero_train) || String(ts.horaire_id) === String(h.numero)));
			if (substForThisTravail) linked = true;

			if (!appliesToday && travauxApplies(t,h,today)) appliesToday = true;
			if (!appliesTomorrow && travauxApplies(t,h,tomorrow)) appliesTomorrow = true;
			if (linked && appliesToday && appliesTomorrow) break;
		  }
		  return { ...h, _linkedToTravaux: linked, _travauxAppliesToday: appliesToday, _travauxAppliesTomorrow: appliesTomorrow };
		});

		// Build today and tomorrow candidate lists
		const todayCandidates = enriched.filter(h => {
		  if (isSubstitution(h)) {
			return Boolean(h._linkedToTravaux && h._travauxAppliesToday);
		  }

		  if (h._date && h._date !== todayStr) return false;
		  if (!circulatesOn(h, today)) return false;
		  if (typeof h._depHM !== 'number') return false;
		  if (h._depHM < todayHM - 1) return false;

		  // if travaux apply at this horaire today, hide regular horaires
		  if (h._travauxAppliesToday) return false;

		  return true;
		});

		const tomorrowCandidates = enriched.filter(h => {
		  if (isSubstitution(h)) {
			return Boolean(h._linkedToTravaux && h._travauxAppliesTomorrow);
		  }

		  if (h._date && h._date !== tomorrowStr) return false;
		  if (!circulatesOn(h, tomorrow)) return false;

		  // hide regular horaires if travaux apply tomorrow during their time window
		  if (h._travauxAppliesTomorrow) return false;

		  return true;
		});

		// final list: if there are any todayCandidates use them; otherwise use tomorrowCandidates
		let finalList;
		let serviceDateStr;
		if (todayCandidates && todayCandidates.length > 0) {
		  finalList = todayCandidates.slice().sort((a,b)=> (a._depHM||99999)-(b._depHM||99999));
		  serviceDateStr = todayStr;
		} else {
		  finalList = (tomorrowCandidates || []).slice().sort((a,b)=> (a._depHM||99999)-(b._depHM||99999));
		  serviceDateStr = tomorrowStr;
		}

		// Construire un index local des perturbations à partir des données fraîchement récupérées
		// Filtrer pour ne garder que les perturbations applicables aujourd'hui (éviter d'appliquer les perturbations d'hier)

		const filteredPerturb = (perturbData || []).filter(p => {
		  try {
			const toYMD = (v) => { if (!v) return null; const d = new Date(v); if (isNaN(d.getTime())) return null; return d.toISOString().slice(0,10); };
			const pDate = toYMD(p.date || p.date_service);
			const db = toYMD(p.date_debut || p.start_date);
			const df = toYMD(p.date_fin || p.end_date);
			// si pDate fourni et ne correspond pas à la date de service -> ignorer
			if (pDate && pDate !== serviceDateStr) return false;
			// si fourche de dates fournie et la date de service n'est pas dans l'intervalle -> ignorer
			if (db && df && !(serviceDateStr >= db && serviceDateStr <= df)) return false;
			// si jours_perturbation fourni -> vérifier que la date de service en fait partie
			try {
			  const joursSet = getPerturbationJours(p);
			  if (joursSet && !joursSet.has(serviceDateStr)) return false;
			} catch (e) {
			  // ignore parse errors and keep perturbation
			}
			return true;
		  } catch (e) {
			return true;
		  }
		});

		const localPerturbMap = buildPerturbMap(filteredPerturb || [], parsedHoraires || []);
		// Debug: afficher sommaire de l'index des perturbations
								debug('localPerturbMap summary', {
		  horaireCount: Object.keys(localPerturbMap.byHoraire || {}).length,
		  numberCount: Object.keys(localPerturbMap.byNumber || {}).length,
		  stopIdCount: Object.keys(localPerturbMap.byStopId || {}).length,
		  stopNameCount: Object.keys(localPerturbMap.byStopName || {}).length,
		  globalCount: (localPerturbMap.global || []).length,
		  sampleStopNames: Object.keys(localPerturbMap.byStopName || {}).slice(0,10)
		});

		// Annoter chaque horaire avec un statut calculé (synchronisé avec la BDD)
		// déterminer la date de service utilisée pour ces finalList (aujourd'hui ou demain)
		const annotated = applyPerturbationsToHoraires(finalList, filteredPerturb || [], null, null, serviceDateStr);

		// Debug: log first few annotated horaires
								try { debug('annotated horaires sample', annotated.slice(0,6).map(a => ({ id: a.id, numero: a.numero_train || a.numero, _status: a._status, _displayTime: a._displayTime }))); } catch (e) {}

		// afficher seulement les 9 premières lignes sur l'afficheur
		setHoraires((annotated || []).slice(0, 9));
		setPerturbations(filteredPerturb || []);
		setTravaux(travauxData || []);
		setTravauxSubstitutions(travauxSubstData || []);
	  } catch (err) {
		// eslint-disable-next-line no-console
		console.error('Erreur Supabase horaires', err);
		if (mounted) setError(err.message || String(err));
	  } finally {
		if (mounted) setLoading(false);
		inFlight = false;
	  }
	};

	// Exécuter immédiatement, puis périodiquement pour synchroniser sans recharger
	fetchData();
	const intervalMs = 15000; // 15 secondes par défaut
	const intervalId = setInterval(fetchData, intervalMs);

	return () => { mounted = false; clearInterval(intervalId); };
  }, [gareDisplay, gareIdParam, buildPerturbMap, computeStatusForHoraireAtStop, findPerturbsForHoraireAndStop, normalizeName, formatTimeFromHM, applyPerturbationsToHoraires, debug, getStops, getPerturbationJours]);

  // Helpers pour perturbations (memoized plus haut)
  
  const [pageIndex, setPageIndex] = useState(0);
  const [showAlternateStatus, setShowAlternateStatus] = useState(false);
  
  useEffect(() => {
    const alternateInterval = setInterval(() => {
      setShowAlternateStatus(prev => !prev);
    }, 2000);
    return () => clearInterval(alternateInterval);
  }, []);
  
  const getPageBounds = useCallback((pIndex) => {
    if (pIndex === 0) return { start: 0, end: 5 };
    const start = 5 + (pIndex - 1) * 8;
    return { start, end: start + 8 };
  }, []);

  const totalPages = horaires.length <= 5 ? 1 : 1 + Math.ceil((horaires.length - 5) / 8);

  useEffect(() => {
    const pageInterval = setInterval(() => {
      setPageIndex((prev) => {
        const tot = horaires.length <= 5 ? 1 : 1 + Math.ceil((horaires.length - 5) / 8);
        if (tot <= 1) return 0;
        return (prev + 1) % tot;
      });
    }, 10000); // Change page every 10 seconds
    return () => clearInterval(pageInterval);
  }, [horaires.length]);

  const { start, end } = getPageBounds(pageIndex);
  const displayedHoraires = horaires.slice(start, end);

  return (
	<div className="afl-departs__container">
	  {/* HEADER */}
	  <div className="afl-departs__header">
	    <div className="afl-departs__header-left">
	      <div className="afl-departs__logo-wrapper">
	        <svg viewBox="0 0 24 24" width="4vh" height="4vh" fill="white">
              <path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h12v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm9 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm-4.5-5H6V7h12v5h-6z"/>
            </svg>
	      </div>
	      <div className="afl-departs__title">Départs</div>
	    </div>
	    
	    <div className="afl-departs__header-center">
	      {totalPages > 1 && Array.from({ length: totalPages }).map((_, i) => (
            <div key={i} className={`afl-departs__page-dot ${i === pageIndex ? 'afl-departs__page-dot--active' : ''}`}>
              {i + 1}
            </div>
          ))}
	    </div>

	    <div className="afl-departs__header-right">
	      <Clock />
	    </div>
	  </div>

	  {/* LISTE DES TRAINS */}
	  <ul className="afl-departs__list">
		{displayedHoraires.length === 0 ? (
		  <li className="afl-departs__row afl-departs__row--empty" key="empty">
			<div style={{ color: 'white', padding: 24, fontSize: 24 }}>Aucun horaire disponible.</div>
		  </li>
		) : displayedHoraires.map((h, idx) => {
		  const horaire = h || {};
		  const op = (horaire.type_train || horaire.op || '').toUpperCase();
		  const number = horaire.numero_train || horaire.number || horaire.numero || '';
		  
		  let time = horaire._displayTime || formatTimeNoSeconds(horaire.heure_depart || horaire.time || horaire.heure || '');
		  const destination = horaire.gare_arrivee_nom || '';
		  const platform = (horaire._displayPlatform || horaire.quai_reel || horaire.quai || horaire.quai_prevu || horaire.platform || '').toString().trim();
		  
		  const stationId = horaire.gare_depart_id || horaire.gare_id || horaire.origin_id || (gareIdParam || null);
		  const stationName = (gareDisplay) ? gareDisplay : (horaire.gare_depart_nom || horaire.gare_depart || horaire.origin_name || null);
		  const status = horaire._status || computeStatusForHoraireAtStop(horaire, stationId, stationName, buildPerturbMap(perturbations));

		  // Removed time = '' to stop alternation
		  
		  let showPlatform = !(status && status.label === 'supprimé') && Boolean(platform);
		  if (showPlatform) {
			const threshold = thresholdForStationType(stationType);
			let diffMinutes = null;
			const sched = (typeof horaire._depHM === 'number') ? horaire._depHM : parseTimeHM(horaire.heure_depart || horaire.time || horaire.heure || horaire._rawTime || '');
			if (sched !== null) {
			  let baseDate = new Date();
			  if (horaire._date) {
				const parts = horaire._date.split('-');
				if (parts.length === 3) {
				  baseDate = new Date(parseInt(parts[0], 10), parseInt(parts[1], 10) - 1, parseInt(parts[2], 10));
				}
			  }
			  baseDate.setHours(Math.floor(sched / 60), sched % 60, 0, 0);
			  const nowHM = currentTime.getHours() * 60 + currentTime.getMinutes();
			  if (!horaire._date) {
				if (sched < 240 && nowHM > 1200) baseDate.setDate(baseDate.getDate() + 1);
				else if (sched > 1200 && nowHM < 240) baseDate.setDate(baseDate.getDate() - 1);
			  }
			  diffMinutes = (baseDate.getTime() - currentTime.getTime()) / 60000;
			}
			if (diffMinutes !== null) {
			  showPlatform = (diffMinutes <= threshold);
			} else {
			  showPlatform = false;
			}
		  }

		  // Calcul des vias
		  const stopsList = getStops(horaire);
		  const viaNames = [];
		  if (Array.isArray(stopsList)) {
			let isAfterStart = false;
			for (const s of stopsList) {
			  const sName = s.gare_nom || s.nom || s.name || s.station_name || '';
			  if (!sName) continue;
			  const norm = normalizeName(sName);
			  if (norm === normalizeName(stationName || '')) {
				isAfterStart = true;
				continue;
			  }
			  if (isAfterStart) {
				if (norm === normalizeName(destination || '')) {
				  break;
				}
				viaNames.push(sName);
			  }
			}
		  }
		  const viasStr = viaNames.length > 0 ? viaNames.join(' > ') : '';
          const marqueeStyle = viasStr.length > 0 ? { animationDuration: `${Math.max(6, viasStr.length * 0.25)}s` } : {};

          const isDelayed = status.label && String(status.label).toLowerCase().includes('retard');
          const isSuppressed = status.label && String(status.label).toLowerCase().includes('supprimé');
          
          let displayStatusText = "À l'heure";
          let delayVal = '';
          if (isDelayed) {
            displayStatusText = status.label;
            if (typeof status.delayMinutes === 'number') {
               delayVal = `+${status.delayMinutes} min`;
               displayStatusText = delayVal;
            }
          }
          if (isSuppressed) displayStatusText = "Supprimé";

		  const isBus = op.includes('CAR') || op.includes('AUTOCAR') || op.includes('BUS') || (horaire.mode && horaire.mode.toLowerCase().includes('bus'));

          const isCompact = pageIndex > 0 && idx > 0;
          const showCompactStatus = isCompact;

		  return (
            <React.Fragment key={idx}>
              <li className={`afl-departs__row ${isCompact ? 'afl-departs__row--compact' : ''}`}>
                <div className="afl-departs__col-time-status">
                  {showCompactStatus && showAlternateStatus ? (
                    <div className={`afl-departs__status-pill ${isSuppressed ? 'afl-departs__status-pill--suppressed' : (isDelayed ? 'afl-departs__status-pill--delayed' : '')}`}>
                      {isSuppressed ? (
                        <svg viewBox="0 0 24 24" width="2.5vh" height="2.5vh" style={{ marginRight: '0.5vw' }}>
                          <circle cx="12" cy="12" r="11" fill="#111" />
                          <path d="M16 9l-1.5-1.5L12 10.5 9.5 8 8 9.5l2.5 2.5L8 14.5 9.5 16l2.5-2.5 2.5 2.5 1.5-1.5-2.5-2.5z" fill="#ff4c5b" />
                        </svg>
                      ) : isDelayed ? (
                        <svg viewBox="0 0 24 24" width="2.5vh" height="2.5vh" style={{ marginRight: '0.5vw' }}>
                          <circle cx="12" cy="12" r="11" fill="#111" />
                          <path d="M11 6h2v6h-2zm0 8h2v2h-2z" fill="#ff9e43" />
                        </svg>
                      ) : (
                        <svg viewBox="0 0 24 24" width="2.5vh" height="2.5vh" style={{ marginRight: '0.5vw' }}>
                          <circle cx="12" cy="12" r="11" fill="white" />
                          <path d="M10 16.5l-4-4 1.5-1.5 2.5 2.5 6.5-6.5 1.5 1.5-8 8z" fill="#005eb8" />
                        </svg>
                      )}
                      <span>{displayStatusText}</span>
                    </div>
                  ) : (
                    <>
                      <div className="afl-departs__time">{time}</div>
                      {!isCompact && (
                        <div className={`afl-departs__status-pill ${isSuppressed ? 'afl-departs__status-pill--suppressed' : (isDelayed ? 'afl-departs__status-pill--delayed' : '')}`}>
                          {isSuppressed ? (
                            <svg viewBox="0 0 24 24" width="2.5vh" height="2.5vh" style={{ marginRight: '0.5vw' }}>
                              <circle cx="12" cy="12" r="11" fill="#111" />
                              <path d="M16 9l-1.5-1.5L12 10.5 9.5 8 8 9.5l2.5 2.5L8 14.5 9.5 16l2.5-2.5 2.5 2.5 1.5-1.5-2.5-2.5z" fill="#ff4c5b" />
                            </svg>
                          ) : isDelayed ? (
                            <svg viewBox="0 0 24 24" width="2.5vh" height="2.5vh" style={{ marginRight: '0.5vw' }}>
                              <circle cx="12" cy="12" r="11" fill="#111" />
                              <path d="M11 6h2v6h-2zm0 8h2v2h-2z" fill="#ff9e43" />
                            </svg>
                          ) : (
                            <svg viewBox="0 0 24 24" width="2.5vh" height="2.5vh" style={{ marginRight: '0.5vw' }}>
                              <circle cx="12" cy="12" r="11" fill="white" />
                              <path d="M10 16.5l-4-4 1.5-1.5 2.5 2.5 6.5-6.5 1.5 1.5-8 8z" fill="#005eb8" />
                            </svg>
                          )}
                          <span>{displayStatusText}</span>
                        </div>
                      )}
                    </>
                  )}
                </div>
                
                <div className="afl-departs__col-train-info">
                  <div className="afl-departs__op-name">{op}</div>
                  {!isCompact && <div className="afl-departs__op-number">{number}</div>}
                </div>
                
                <div className="afl-departs__col-destination">
                  <div className="afl-departs__dest-line">
                    {isBus && (
                      <svg viewBox="0 0 24 24" width="28" height="28" fill="white">
                        <path d="M4 16c0 .88.39 1.67 1 2.22V20c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h8v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1.78c.61-.55 1-1.34 1-2.22V6c0-3.5-3.58-4-8-4s-8 .5-8 4v10zm3.5 1c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm9 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6H6V6h12v5z"/>
                      </svg>
                    )}
                    <MarqueeText text={destination} className="afl-departs__destination-name" />
                  </div>
                  {!isCompact && (
                    <div className="afl-departs__vias-wrapper">
                      {viasStr ? (
                        <>
                          <span className="afl-departs__vias-static">via </span>
                          <div className="afl-departs__vias-container">
                            <div className="afl-departs__vias" style={marqueeStyle}>{viasStr}</div>
                          </div>
                        </>
                      ) : (
                        <span className="afl-departs__vias-static">direct</span>
                      )}
                    </div>
                  )}
                </div>
                
                <div className="afl-departs__col-platform">
                  {isSuppressed ? (
                    <svg viewBox="0 0 24 24" width="8vh" height="8vh">
                      <circle cx="12" cy="12" r="11" fill="#ff4c5b" />
                      <path d="M16 9l-1.5-1.5L12 10.5 9.5 8 8 9.5l2.5 2.5L8 14.5 9.5 16l2.5-2.5 2.5 2.5 1.5-1.5-2.5-2.5z" fill="white" />
                    </svg>
                  ) : showPlatform ? (
                    <div className="afl-departs__platform-box">
                      {!isBus && <div className="afl-departs__platform-label">Voie</div>}
                      <div className="afl-departs__platform-value">
                        {isBus ? (
                          <svg viewBox="0 0 24 24" width="7vh" height="7vh" fill="#012a6a">
                            <path d="M4 16c0 .88.39 1.67 1 2.22V20c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h8v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1.78c.61-.55 1-1.34 1-2.22V6c0-3.5-3.58-4-8-4s-8 .5-8 4v10zm3.5 1c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm9 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6H6V6h12v5z"/>
                          </svg>
                        ) : platform}
                      </div>
                    </div>
                  ) : null}
                </div>
              </li>
              {/* Séparateur pour toutes les lignes sauf la dernière. */}
              {idx < displayedHoraires.length - 1 && (
                <div className="afl-departs__separator-wrapper">
                  <div className="afl-departs__separator" />
                </div>
              )}
            </React.Fragment>
		  );
		})}
	  </ul>
	</div>
  );
}