import React, { useState, useEffect, useCallback } from 'react';
import supabase from '../../../lib/supabase';
import { fetchAllRows } from '../../../lib/fetchAllRows';
import './AFLDepartsQuais.css';
import useAnnonceSonoreRealtime from '../../../hooks/useAnnonceSonoreRealtime';
import Logo from '../../../components/Logo';
import { getSourceFromPath } from '../../../services/railwayService';
import { getSncfTimetable } from '../../../services/sncfApi';

// Helper utilitaire : format HH:MM sans secondes (ex: 15:57)
const formatTimeNoSeconds = (v) => {
  if (v == null) return '';
  const tryDate = new Date(v);
  if (!isNaN(tryDate.getTime())) {
    const hh = String(tryDate.getHours() % 24).padStart(2, '0');
    const mm = String(tryDate.getMinutes()).padStart(2, '0');
    return `${hh}:${mm}`;
  }
  const m = String(v).match(/(\d{1,2})[:h](\d{2})/i);
  if (m) {
    const h = parseInt(m[1], 10) % 24;
    return `${String(h).padStart(2, '0')}:${m[2]}`;
  }
  return v;
};

const AFLDepartsQuais = () => {
  const [currentTime, setCurrentTime] = useState(new Date());
  const [nextDeparture, setNextDeparture] = useState(null);
  const [loading, setLoading] = useState(true);

  // Parse URL manually since we are not in a React Router context
  const searchParams = new URLSearchParams(window.location.search);
  const gareParam = searchParams.get('gare') || '';
  const gareIdParam = searchParams.get('gare_id') || searchParams.get('gareId');
  const quaiParam = searchParams.get('quai') || searchParams.get('voie') || '';
  const gareDisplay = gareParam ? decodeURIComponent(String(gareParam).replace(/\+/g, ' ')).replace(/-/g, ' ') : null;

  const [resolvedGareId, setResolvedGareId] = useState(gareIdParam || null);
  useAnnonceSonoreRealtime(resolvedGareId, 'AFLDepartsQuais', quaiParam);

  useEffect(() => {
    let mounted = true;
    const resolveGareId = async () => {
      if (!supabase) return;
      try {
        if (gareIdParam) {
          const { data: gdata } = await supabase.from('gares').select('id').eq('id', gareIdParam).limit(1);
          if (mounted && gdata && gdata.length) {
            setResolvedGareId(gdata[0].id);
          }
        } else if (gareDisplay) {
          const flexNeedle = `%${String(gareDisplay).replace(/[-_+\s]+/g, '%')}%`;
          const { data: gdata } = await supabase.from('gares').select('id, nom').ilike('nom', flexNeedle);
          if (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;
            });
            const chosen = exactMatch || gdata[0];
            if (mounted && chosen) {
              setResolvedGareId(chosen.id);
            }
          }
        }
      } catch (e) {
        console.error('[AFLDepartsQuais] Erreur resolution gare:', e);
      }
    };
    resolveGareId();
    return () => { mounted = false; };
  }, [gareIdParam, gareDisplay]);

  // Real-time clock update
  useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  // --- Helpers pour perturbations, travaux, etc (portés de AFLDeparts.js) ---
  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);
      if (parsed && typeof parsed === 'object') {
        if (Array.isArray(parsed.arrets)) return parsed.arrets;
        return parsed;
      }
      return [];
    } catch (e) { return []; }
  }, []);

  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;
    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) {}
      }
    }
    return [];
  }, []);

  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 };
    }
  }, []);

  const getPerturbationJours = useCallback((p) => {
    if (!p) return null;
    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);
      }
    }
    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;
  }, []);

  const parseTimeHM = useCallback((s) => {
    if (!s) return null;
    if (typeof s === 'number') return s % 1440;
    const m = String(s).match(/(\d{1,2})[h:](\d{2})/i);
    if (m) {
      const h = parseInt(m[1], 10) % 24;
      return h * 60 + parseInt(m[2], 10);
    }
    const d = new Date(s);
    if (!isNaN(d.getTime())) return d.getHours() * 60 + d.getMinutes();
    return null;
  }, []);



  const buildPerturbMap = useCallback((list, allHorairesList) => {
    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 (Array.isArray(allHorairesList) && allHorairesList.length) {
      try {
        const byH = Object.keys(idx.byHoraire || {});
        if (byH && byH.length) {
          for (const hid of byH) {
            const h = allHorairesList.find(x => String(x.id) === 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] || [];
                (idx.byHoraire[hid] || []).forEach(p => idx.byNumber[numKey].push(p));
              }
            }
          }
        }
      } catch (e) {}
    }
    return idx;
  }, [safeParseArrets, normalizeName]);



  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 || na.includes(ns) || ns.includes(na);
        }
        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 || ns.includes(na) || na.includes(ns);
            }
            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]);

  const applyPerturbationsToHoraires = useCallback((list, perturbList, displayStationId, displayStationName, serviceDate, map) => {
    const targetStationId = displayStationId || null;
    const targetStationName = displayStationName || 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 });
      }

      const displayStatus = computeStatusForHoraireAtStop(horaire, targetStationId, targetStationName, map, serviceDate);
      let displayTime = horaire._displayTime || formatTimeNoSeconds(horaire.heure_depart || horaire.time || horaire.heure || '');
      horaire._stopsStatus = stopsStatus;
      horaire._status = displayStatus;
      horaire._displayTime = displayTime;
      return horaire;
    });
  }, [computeStatusForHoraireAtStop, getStops]);

  const fetchData = useCallback(async () => {
    try {
      const source = getSourceFromPath(window.location.pathname);
      if (source === 'sncf') {
        const { data: sncfData } = await getSncfTimetable({
          gareName: gareDisplay || gareParam,
          mode: 'departs',
          quai: quaiParam
        });
        if (sncfData && sncfData.length > 0) {
          const train = sncfData[0];
          const enriched = {
            ...train,
            _rawTime: train.heure_depart,
            _displayTime: formatTimeNoSeconds(train.heure_depart),
            _status: {
              label: train.etat === 'supprime' ? 'supprimé' : (train.retard_minutes > 0 ? `retardé +${train.retard_minutes}min.` : "à l'heure"),
              detail: '',
              delayMinutes: train.retard_minutes || null
            },
            _nextStationStatus: {
              label: train.etat === 'supprime' ? 'supprimé' : (train.retard_minutes > 0 ? `retardé +${train.retard_minutes}min.` : "à l'heure")
            },
            _isToday: true
          };
          setNextDeparture(enriched);
        } else {
          setNextDeparture(null);
        }
        setLoading(false);
        return;
      }

      if (!supabase) return;

      const [{ data: horairesData }, { data: subData }, { data: perturbData }, { data: travauxData }] = await Promise.all([
        fetchAllRows(supabase.from('horaires').select('*')),
        supabase.from('travaux_substitutions').select('*'),
        supabase.from('perturbations').select('*'),
        supabase.from('travaux').select('*')
      ]);

      let parsedHoraires = (horairesData || []).map(h => {
        try {
          if (h && typeof h.gares_desservies === 'string') {
            const parsed = JSON.parse(h.gares_desservies);
            if (Array.isArray(parsed)) return { ...h, gares_desservies: parsed };
          }
        } catch (e) {}
        return h || {};
      });

      const substitutions = subData || [];
      const travauxList = travauxData || [];

      // Link substitutions
      parsedHoraires = parsedHoraires.map(h => {
        const subs = substitutions.filter(s => String(s.horaire_id) === String(h.id));
        if (subs.length > 0) {
          return { ...h, _substitutions: subs };
        }
        return h;
      });

      // Normaliser date
      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 = parsedHoraires.map(h => ({ ...h, _date: normalizeDate(h) }));

      // Time parsing & enrichment
      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 || '';
        const stopsListForH = getStops(h);
        if (gareDisplay && Array.isArray(stopsListForH)) {
          const stop = stopsListForH.find(s => normalizeName((s.gare_nom || s.nom || s.name || '').toString()) === normalizeName(gareDisplay));
          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 };
      });

      // Jours de circulation
      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 circulatesOn = (h, d) => {
		  if (!h || !d) return false;
		  const pad = (n) => String(n).padStart(2, '0');
		  const targetDateHyphen = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
		  const targetDateCompact = `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}`;
		  const targetDay = d.getDay();

		  if (Array.isArray(h.dates) && h.dates.length > 0) {
		    return h.dates.includes(targetDateCompact) || h.dates.includes(targetDateHyphen);
		  }

		  const customDaysRaw = h.jours_personnalises;
		  if (customDaysRaw) {
		    let customDays = [];
		    if (Array.isArray(customDaysRaw)) {
		      customDays = customDaysRaw;
		    } else if (typeof customDaysRaw === 'string') {
		      try { customDays = JSON.parse(customDaysRaw); } catch (e) {}
		    }
		    if (Array.isArray(customDays) && customDays.length > 0) {
		      const match = customDays.find(item => item.date === targetDateHyphen || item.date === targetDateCompact);
		      if (match) return Boolean(match.circule);
		    }
		  }

		  const dayNames = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
		  const colName = `circule_${dayNames[targetDay]}`;
		  if (typeof h[colName] !== 'undefined' && h[colName] !== null) {
		    const db = h.date_debut ? String(h.date_debut).slice(0, 10) : null;
		    const df = h.date_fin ? String(h.date_fin).slice(0, 10) : null;
		    if (db && targetDateHyphen < db) return false;
		    if (df && targetDateHyphen > df) return false;
		    return Boolean(h[colName]);
		  }

		  if (Array.isArray(h.days) && h.days.length > 0) {
		    if (!h.days.includes(targetDay)) return false;
		    if (h.start && targetDateCompact < String(h.start).replace(/-/g, '')) return false;
		    if (h.end && targetDateCompact > String(h.end).replace(/-/g, '')) return false;
		    return true;
		  }

		  const singleDate = h.date_depart || h.date || h.service_date;
		  if (singleDate) {
		    const sStr = String(singleDate).slice(0, 10);
		    return sStr === targetDateHyphen || sStr.replace(/-/g, '') === targetDateCompact;
		  }

		  return true;
		};

      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.start_date);
        const df = parseDateOnly(t.date_fin || 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.start_time);
        const endHM = parseTimeHM(t.heure_fin || 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 substitutions.some(ts => String(ts.horaire_id) === String(h.id) || String(ts.horaire_id) === String(h.numero_train) || String(ts.horaire_id) === String(h.numero));
      };

      const enriched = enrich.map(h => {
        let linked = false;
        let appliesToday = false;
        let appliesTomorrow = false;
        for (const t of travauxList) {
          const tLine = t.ligne_id || t.ligne || t.line_id || t.line;
          const hLine = h.ligne_id || h.ligne || h.line_id || h.line;
          if (typeof tLine !== 'undefined' && tLine !== null) {
            if (typeof hLine === 'undefined' || hLine === null || String(tLine) !== String(hLine)) {
              continue;
            }
          }
          const ref = t.horaire_id || t.horaire || t.numero_train || t.numero;
          if (ref && (String(ref) === String(h.id) || String(ref) === String(h.numero_train) || String(ref) === String(h.numero))) linked = true;
          const substForThisTravail = substitutions.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 };
      });

      // Filter by station: keep departures from this station or stops at this station (excluding terminus)
      let stationFiltered = enriched;
      if (gareDisplay) {
        const normalized = normalizeName(gareDisplay);
        stationFiltered = enriched.filter(h => {
          const destName = normalizeName((h.gare_arrivee_nom || h.gare_arrivee || '').toString());
          if (destName === normalized) return false;

          const departName = normalizeName((h.gare_depart_nom || h.gare_depart || '').toString());
          if (departName === normalized) return true;

          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 || '').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;
        });
      }

      // Candidate filters for Today and Tomorrow (Departure platform logic)
      const todayCandidates = stationFiltered.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;
        // Keep departures that occur in the future or up to 1 minute ago (departure window)
        if (h._depHM < todayHM - 1) return false;
        if (h._travauxAppliesToday) return false;
        return true;
      });

      const tomorrowCandidates = stationFiltered.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;
        if (h._travauxAppliesTomorrow) return false;
        return true;
      });

      let finalList = [];
      let serviceDateStr = '';
      if (todayCandidates.length > 0) {
        finalList = todayCandidates.slice().sort((a, b) => a._depHM - b._depHM);
        if (finalList.length <= 5 && tomorrowCandidates && tomorrowCandidates.length > 0) {
          const sortedTomorrow = tomorrowCandidates.slice().sort((a,b)=> (a._depHM||99999)-(b._depHM||99999));
          finalList = [...finalList, ...sortedTomorrow];
        }
        serviceDateStr = todayStr;
      } else {
        finalList = tomorrowCandidates.slice().sort((a, b) => a._depHM - b._depHM);
        serviceDateStr = tomorrowStr;
      }

      // Apply perturbations (delays, cancellations)

      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);
          if (pDate && pDate !== serviceDateStr) return false;
          if (db && df && !(serviceDateStr >= db && serviceDateStr <= df)) return false;
          const joursSet = getPerturbationJours(p);
          if (joursSet && !joursSet.has(serviceDateStr)) return false;
          return true;
        } catch (e) { return true; }
      });

      const map = buildPerturbMap(filteredPerturb, parsedHoraires);
      const annotated = applyPerturbationsToHoraires(finalList, filteredPerturb, null, gareDisplay, serviceDateStr, map);

      const candidatesOnPlatform = annotated.filter(h => {
        const stopsList = getStops(h);
        let stopForStation = null;
        if (gareDisplay && Array.isArray(stopsList)) {
          stopForStation = stopsList.find(s => normalizeName((s.gare_nom || s.nom || s.name || '').toString()) === normalizeName(gareDisplay));
        }
        const platform = ((stopForStation && (stopForStation.quai_reel || stopForStation.quai || stopForStation.platform || stopForStation.quay)) || h.quai_reel || h.voie || h.quai || '').toString().trim();
        if (!quaiParam) return true;
        return platform.toLowerCase() === quaiParam.toLowerCase();
      });

      if (candidatesOnPlatform.length > 0) {
        setNextDeparture(candidatesOnPlatform[0]);
      } else {
        setNextDeparture(null);
      }
      setLoading(false);
    } catch (err) {
      console.error(err);
      setLoading(false);
    }
  }, [applyPerturbationsToHoraires, buildPerturbMap, gareDisplay, gareParam, getPerturbationJours, getStops, normalizeName, parseTimeHM, quaiParam]);

  useEffect(() => {
    fetchData();
    const interval = setInterval(fetchData, 15000);
    return () => clearInterval(interval);
  }, [fetchData]);

  if (loading) return <div className="afl-q-container" style={{ background: '#0c0f2e' }}></div>;

  if (!nextDeparture) {
    return (
      <div className="afl-q-container">
        <header className="afl-q-header">
          <div className="afl-q-header-left">
            <svg width="56px" height="56px" viewBox="0 0 32 32" fill="none" className="afl-q-header-icon">
              <path d="M4 8l5 5-5 5M11 8l5 5-5 5" stroke="white" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
              <circle cx="21" cy="11" r="2.6" fill="white" />
              <path d="M19 15h4.5l1.6 5.8-2 1-1-3.6-1 5.8-3-1 1.6-8z" fill="white" />
              <path d="M26 6v20M26 6h2M26 26h2" stroke="white" strokeWidth="2.2" strokeLinecap="round" />
            </svg>
            <div className="afl-q-header-title">Prochain départ</div>
          </div>
          <div className="afl-q-header-clock">{formatTimeNoSeconds(currentTime)}</div>
        </header>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '43px', color: '#ffffff', fontWeight: 600 }}>
          Aucun départ prévu
        </div>
        <footer className="afl-q-footer">
          {quaiParam && (
            <div className="afl-q-voie-box">
              <div className="afl-q-voie-label">Voie</div>
              <div className="afl-q-voie-value">{quaiParam}</div>
            </div>
          )}
        </footer>
      </div>
    );
  }

  const trainData = nextDeparture;

  const isSuppressed = trainData._status && String(trainData._status.label || '').toLowerCase().includes('supprimé');
  const isDelayed = trainData._status && String(trainData._status.label || '').toLowerCase().includes('retard');
  
  let delayVal = '+ 5 min';
  if (typeof trainData._status?.delayMinutes === 'number' && trainData._status.delayMinutes > 0) {
    delayVal = `+ ${trainData._status.delayMinutes} min`;
  } else if (trainData._status?.label && trainData._status.label.includes('+')) {
    delayVal = trainData._status.label;
  }

  const pillClass = isSuppressed ? 'afl-q-pill--suppressed' : isDelayed ? 'afl-q-pill--delayed' : '';
  const pillText = isSuppressed ? 'Supprimé' : isDelayed ? delayVal : "À l'heure";

  const renderPillIcon = () => {
    if (isSuppressed) {
      return (
        <svg viewBox="0 0 20 20" className="afl-q-pill-icon">
          <circle cx="10" cy="10" r="9.5" fill="#1e1e1e" />
          <path d="M6.5 6.5l7 7M13.5 6.5l-7 7" stroke="#ff5c73" strokeWidth="2.5" strokeLinecap="round" />
        </svg>
      );
    }
    if (isDelayed) {
      return (
        <svg viewBox="0 0 20 20" className="afl-q-pill-icon">
          <circle cx="10" cy="10" r="9.5" fill="#1e1e1e" />
          <line x1="10" y1="4.5" x2="10" y2="11.5" stroke="white" strokeWidth="2.4" strokeLinecap="round" />
          <circle cx="10" cy="14.8" r="1.4" fill="white" />
        </svg>
      );
    }
    return (
      <svg viewBox="0 0 20 20" className="afl-q-pill-icon">
        <circle cx="10" cy="10" r="9.5" fill="white" />
        <path d="M6 10.2l2.6 2.6 5.4-5.4" stroke="#45527a" strokeWidth="2.8" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    );
  };

  const displayTime = trainData._displayTime || formatTimeNoSeconds(trainData.heure_depart || trainData.time || trainData.heure || '');
  const trainType = trainData.type_train || trainData.op || 'TER';
  const trainNum = trainData.numero_train || trainData.numero || trainData.number || '';
  const destName = trainData.gare_arrivee_nom || trainData.gare_arrivee || 'Terminus';

  const stopsList = getStops(trainData);
  let stopForStation = null;
  if (gareDisplay && Array.isArray(stopsList)) {
    stopForStation = stopsList.find(s => normalizeName((s.gare_nom || s.nom || s.name || '').toString()) === normalizeName(gareDisplay));
  }
  const platformStr = ((stopForStation && (stopForStation.quai_reel || stopForStation.quai || stopForStation.platform || stopForStation.quay)) || trainData.quai_reel || trainData.voie || trainData.quai || trainData._displayPlatform || quaiParam || '').toString().trim() || quaiParam || '1';

  // Extraction des destinations (prise en compte des trains multi-branches / tranches)
  let destinations = [];
  if (Array.isArray(trainData.tranches) && trainData.tranches.length > 0) {
    destinations = trainData.tranches.map(t => ({
      name: t.gare_arrivee_nom || t.destination || t.nom,
      op: t.type_train || t.op || trainType,
      number: t.numero_train || t.number || trainNum
    }));
  } else if (destName.includes('/')) {
    destinations = destName.split('/').map(d => ({
      name: d.trim(),
      op: trainType,
      number: trainNum
    }));
  } else if (destName.includes(' - ') && (destName.toLowerCase().includes('marseille') || destName.toLowerCase().includes('montpellier'))) {
    destinations = [
      { name: 'Marseille Saint-Charles', op: trainType, number: trainNum },
      { name: 'Montpellier Saint-Roch', op: trainType, number: trainNum }
    ];
  } else {
    destinations = [{
      name: destName,
      op: trainType,
      number: trainNum
    }];
  }

  // Formatage des lignes de destinations (découpage élégant sur 2 lignes si nécessaire)
  const formatDestLines = (name) => {
    if (!name) return ['Terminus'];
    const clean = name.trim();
    if (clean.includes('Marseille Saint-Charles')) return ['Marseille Saint-', 'Charles'];
    if (clean.includes('Montpellier Saint-Roch')) return ['Montpellier', 'Saint-Roch'];
    if (clean.includes('Paris Gare de Lyon')) return ['Paris', 'Gare de Lyon'];
    if (clean.includes('Paris Montparnasse')) return ['Paris', 'Montparnasse'];
    if (clean.includes('Bourg-en-Bresse')) return ['Bourg-en-', 'Bresse'];
    if (clean.length > 12) {
      const parts = clean.split(' ');
      if (parts.length >= 2) {
        const mid = Math.ceil(parts.length / 2);
        return [parts.slice(0, mid).join(' '), parts.slice(mid).join(' ')];
      }
    }
    return [clean];
  };

  // Calcul dynamique des arrêts desservis (aval)
  const currentStationName = gareDisplay || (stopForStation && (stopForStation.gare_nom || stopForStation.nom || stopForStation.name)) || (stopsList[0] && (stopsList[0].gare_nom || stopsList[0].nom || stopsList[0].name)) || 'Départ';

  let downstreamStops = [];
  if (Array.isArray(stopsList) && stopsList.length > 0) {
    const normCurrent = normalizeName(currentStationName);
    const startIdx = stopsList.findIndex(s => {
      const sName = normalizeName((s.gare_nom || s.nom || s.name || s.station_name || (typeof s === 'string' ? s : '')).toString());
      return sName && (sName === normCurrent || sName.includes(normCurrent) || normCurrent.includes(sName));
    });

    const rawDownstream = startIdx !== -1 ? stopsList.slice(startIdx + 1) : stopsList;
    
    const seen = new Set();
    rawDownstream.forEach(s => {
      const name = (s.gare_nom || s.nom || s.name || s.station_name || s.stop_name || (typeof s === 'string' ? s : '')).toString().trim();
      const norm = normalizeName(name);
      if (name && norm !== normCurrent && !seen.has(norm)) {
        seen.add(norm);
        downstreamStops.push(name);
      }
    });
  }

  // Si aucun arrêt intermédiaire n'est trouvé, afficher la/les destination(s)
  if (downstreamStops.length === 0) {
    if (destName) {
      if (destName.includes('/')) {
        downstreamStops = destName.split('/').map(d => d.trim());
      } else {
        downstreamStops = [destName];
      }
    }
  }

  return (
    <div className="afl-q-container">
      {/* HEADER (10.5vh) */}
      <header className="afl-q-header">
        <div className="afl-q-header-left">
          <svg width="56px" height="56px" viewBox="0 0 32 32" fill="none" className="afl-q-header-icon">
            <path d="M4 8l5 5-5 5M11 8l5 5-5 5" stroke="white" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
            <circle cx="21" cy="11" r="2.6" fill="white" />
            <path d="M19 15h4.5l1.6 5.8-2 1-1-3.6-1 5.8-3-1 1.6-8z" fill="white" />
            <path d="M26 6v20M26 6h2M26 26h2" stroke="white" strokeWidth="2.2" strokeLinecap="round" />
          </svg>
          <div className="afl-q-header-title">Prochain départ</div>
        </div>
        <div className="afl-q-header-clock">{formatTimeNoSeconds(currentTime)}</div>
      </header>

      {/* CORPS PRINCIPAL */}
      <main className="afl-q-main">
        {/* PANNEAU GAUCHE : CARTE D'INFORMATION DU TRAIN */}
        <section className="afl-q-left-card">
          {/* Ligne Heure de départ & Statut */}
          <div className="afl-q-card-top">
            <div className="afl-q-card-time">{displayTime}</div>
            <div className={`afl-q-pill ${pillClass}`}>
              {renderPillIcon()}
              <span>{pillText}</span>
            </div>
          </div>

          {/* Blocs Destinations dynamiques selon l'horaire */}
          {destinations.map((d, i) => {
            const lines = formatDestLines(d.name);
            return (
              <div key={i} className="afl-q-dest-block">
                {lines.map((line, lIdx) => (
                  <div key={lIdx} className="afl-q-dest-title">{line}</div>
                ))}
                <div className="afl-q-dest-sub">
                  {d.op} {d.number}
                </div>
              </div>
            );
          })}

          {/* Pied de carte : Logo du type de train (sans icônes de services) */}
          <div className="afl-q-card-footer">
            <Logo
              op={trainType}
              classNameBox="afl-q-train-logo-box"
              classNameImg="afl-q-train-logo-img"
              classNameText="afl-q-train-logo-text"
            />
          </div>
        </section>

        {/* PANNEAU DROIT : TIMELINE ARBORESCENTE DYNAMIQUE */}
        <section className="afl-q-timeline-area">
          <svg viewBox="0 0 850 560" className="afl-q-timeline-svg">
            {/* 3 mini-points cyan au sommet */}
            <circle cx="45" cy="22" r="4" fill="#00c5ff" />
            <circle cx="45" cy="38" r="4" fill="#00c5ff" />
            <circle cx="45" cy="54" r="4" fill="#00c5ff" />

            {/* Station 1: Gare actuelle */}
            <circle cx="45" cy="92" r="17" fill="#0c102a" stroke="#00c5ff" strokeWidth="4" />
            <path d="M 37 89 L 45 97 L 53 89" stroke="#00c5ff" strokeWidth="3.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            <text x="82" y="102" fill="#ffffff" fontSize="35" fontWeight="800" fontFamily="Achemine, Segoe UI, sans-serif">
              {currentStationName}
            </text>

            {/* Tracé dynamique des arrêts aval */}
            {downstreamStops.length <= 1 ? (
              <g>
                <line x1="45" y1="109" x2="45" y2="480" stroke="#00c5ff" strokeWidth="5.5" strokeLinecap="round" />
                <circle cx="45" cy="480" r="16" fill="#0c102a" stroke="#00c5ff" strokeWidth="5" />
                <text x="82" y="490" fill="#ffffff" fontSize="35" fontWeight="800" fontFamily="Achemine, Segoe UI, sans-serif">
                  {downstreamStops[0] || destName}
                </text>
              </g>
            ) : (
              (() => {
                const N = downstreamStops.length;
                const yStart = 160;
                const yEnd = 500;
                const step = Math.min(65, (yEnd - yStart) / Math.max(1, N - 1));
                const lineEndY = yStart + (N - 1) * step;

                return (
                  <g>
                    <line x1="45" y1="109" x2="45" y2={lineEndY} stroke="#00c5ff" strokeWidth="5.5" strokeLinecap="round" />
                    {downstreamStops.map((stopName, sIdx) => {
                      const isLast = sIdx === N - 1;
                      const posY = yStart + sIdx * step;

                      if (!isLast) {
                        return (
                          <g key={sIdx}>
                            <circle cx="45" cy={posY} r="6.5" fill="#00c5ff" />
                            <text x="82" y={posY + 8} fill="#ffffff" fontSize="28" fontWeight="500" fontFamily="Achemine, Segoe UI, sans-serif">
                              {stopName}
                            </text>
                          </g>
                        );
                      }
                      return (
                        <g key={sIdx}>
                          <circle cx="45" cy={posY} r="16" fill="#0c102a" stroke="#00c5ff" strokeWidth="5" />
                          <text x="82" y={posY + 10} fill="#ffffff" fontSize="35" fontWeight="800" fontFamily="Achemine, Segoe UI, sans-serif">
                            {stopName}
                          </text>
                        </g>
                      );
                    })}
                  </g>
                );
              })()
            )}
          </svg>
        </section>
      </main>

      {/* FOOTER : BOX VOIE EN BAS À DROITE (SANS REPÈRES DE QUAI NI COMPOSITION) */}
      <footer className="afl-q-footer">
        <div className="afl-q-voie-box">
          <div className="afl-q-voie-label">Voie</div>
          <div className="afl-q-voie-value">{platformStr}</div>
        </div>
      </footer>
    </div>
  );
};

export default AFLDepartsQuais;