import React, { useEffect, useState } from 'react';
import './App.css';

import { applyPolyfills, defineCustomElements } from 'wcs-core/loader';
import Departs from './pages/Departs';
import Arrivees from './pages/Arrivees';
import Displays from './pages/Displays';
import ClassiquesDeparts from './pages/afficheurs/classiques/ClassiquesDeparts';
import ClassiquesArrivees from './pages/afficheurs/classiques/ClassiquesArrivees';
import ClassiquesDepartsQuais from './pages/afficheurs/classiques/quais/ClassiquesDepartsQuais';
import ClassiquesArriveesQuais from './pages/afficheurs/classiques/quais/ClassiquesArriveesQuais';
import AFLDeparts from './pages/afficheurs/afl/AFLDeparts';
import AFLArrivees from './pages/afficheurs/afl/AFLArrivees';
import AFLDepartsQuais from './pages/afficheurs/afl/AFLDepartsQuais';
import AFLArriveesQuais from './pages/afficheurs/afl/AFLArriveesQuais';
import EVAArrivees from './pages/afficheurs/eva/EVAArrivees';
import EVADeparts from './pages/afficheurs/eva/EVADeparts';
import SelectAfficheur from './pages/SelectAfficheur';
import AfficheurViewportWrapper from './components/AfficheurViewportWrapper';
import sessionMemory from './lib/sessionMemory';
import { getSourceFromPath } from './services/railwayService';

applyPolyfills().then(() => defineCustomElements(window));

// Petit routeur client sans dépendances externes
function useSimpleRouter() {
  function normalizePath(p) {
    if (!p) return '/';
    // retirer query string et hash
    p = String(p).split(/[?#]/)[0];
    if (p.indexOf('index.html') !== -1) return '/';
    p = p.trim();
    if (p !== '/') p = p.replace(/\/+$/, '');
    return p || '/';
  }

  const [route, setRoute] = useState(() => normalizePath(window.location.pathname || '/'));

  useEffect(() => {
    const onPop = () => {
      const p = normalizePath(window.location.pathname || '/');
      console.debug('[router] popstate ->', p);
      setRoute(p);
    };
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  function navigate(path) {
    const target = normalizePath(path);
    const currentFull = window.location.pathname + (window.location.search || '') + (window.location.hash || '');
    if (currentFull !== path) {
      console.debug('[router] navigate ->', path, '(normalized ->', target, ')');
      try {
        window.history.pushState({}, '', path);
      } catch (e) {
        try { window.history.pushState({}, '', target); } catch (err) {}
      }
      setRoute(target);
    } else {
      setRoute(target);
    }
  }

  return { route, navigate };
}

function App() {
  const { route, navigate } = useSimpleRouter();

  const source = getSourceFromPath(route);
  const prefix = source === 'supabase' ? '/ferrovia' : '';
  const cleanRoute = (route.replace(/^\/ferrovia/, '') || '/');

  // Composant Home explicite (panels cliquables)
  function Home({ navigate, prefix, source }) {
    const panelStyle = {
      width: '42%',
      cursor: 'pointer',
      padding: 24,
      borderRadius: 10,
      boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
      background: '#fff',
      textAlign: 'center',
      border: '1px solid #e0e8f6',
      transition: 'transform 0.15s ease'
    };

    return (
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '32px 24px', alignItems: 'center', background: '#e9f0ff', borderRadius: '12px' }}>
        <div style={{ width: '100%', textAlign: 'center', marginBottom: 20 }}>
          <div style={{ display: 'inline-block', padding: '4px 12px', borderRadius: '20px', background: source === 'supabase' ? '#e6f4ea' : '#e8f0fe', color: source === 'supabase' ? '#137333' : '#1a73e8', fontWeight: 600, fontSize: '13px', marginBottom: '8px' }}>
            {source === 'supabase' ? 'Mode Base de Données (Ferrovia)' : 'Mode Officiel SNCF (GTFS / Temps Réel)'}
          </div>
          <h1 style={{ margin: '8px 0', fontSize: 28, color: '#002257' }}>Accueil</h1>
          <p style={{ margin: '4px 0 16px', color: '#555' }}>
            {source === 'supabase'
              ? "Consultez les afficheurs basés sur les données de votre BDD Supabase."
              : "Consultez les afficheurs connectés aux flux réels GTFS et Open Data SNCF."}
          </p>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-around', width: '100%', maxWidth: '800px' }}>
          <div
            role="button"
            tabIndex={0}
            onClick={() => { try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {} navigate(`${prefix}/departs`); }}
            onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ' ? (function(){ try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {} navigate(`${prefix}/departs`); })() : null)}
            style={panelStyle}
            aria-label="Accéder aux départs"
          >
            <h2 style={{ color: '#00439e', marginTop: 0 }}>🚆 Départs</h2>
            <p style={{ color: '#666', fontSize: '14px' }}>Consultez les prochains départs d'une gare. Choisissez une gare et le style d'afficheur.</p>
          </div>

          <div
            role="button"
            tabIndex={0}
            onClick={() => { try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {} navigate(`${prefix}/arrivees`); }}
            onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ' ? (function(){ try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {} navigate(`${prefix}/arrivees`); })() : null)}
            style={panelStyle}
            aria-label="Accéder aux arrivées"
          >
            <h2 style={{ color: '#00439e', marginTop: 0 }}>🏁 Arrivées</h2>
            <p style={{ color: '#666', fontSize: '14px' }}>Consultez les prochaines arrivées d'une gare en temps réel.</p>
          </div>
        </div>
      </div>
    );
  }

  // Routes pour afficheurs : supporte le mode racine ET le mode /ferrovia
  if (cleanRoute.startsWith('/afficheurs/departs/classiques/quais')) {
    return <AfficheurViewportWrapper><ClassiquesDepartsQuais /></AfficheurViewportWrapper>;
  }
  if (cleanRoute.startsWith('/afficheurs/arrivees/classiques/quais')) {
    return <AfficheurViewportWrapper><ClassiquesArriveesQuais /></AfficheurViewportWrapper>;
  }
  if (cleanRoute.startsWith('/afficheurs/departs/classiques')) {
    return <AfficheurViewportWrapper><ClassiquesDeparts /></AfficheurViewportWrapper>;
  }
  if (cleanRoute.startsWith('/afficheurs/departs/afl/quais')) {
    return <AfficheurViewportWrapper><AFLDepartsQuais /></AfficheurViewportWrapper>;
  }
  if (cleanRoute.startsWith('/afficheurs/departs/afl')) {
    return <AfficheurViewportWrapper><AFLDeparts /></AfficheurViewportWrapper>;
  }
  if (cleanRoute.startsWith('/afficheurs/departs/eva')) {
    return <AfficheurViewportWrapper><EVADeparts /></AfficheurViewportWrapper>;
  }
  if (cleanRoute.startsWith('/afficheurs/arrivees/afl/quais')) {
    return <AfficheurViewportWrapper><AFLArriveesQuais /></AfficheurViewportWrapper>;
  }
  if (cleanRoute.startsWith('/afficheurs/arrivees/afl')) {
    return <AfficheurViewportWrapper><AFLArrivees /></AfficheurViewportWrapper>;
  }
  if (cleanRoute.startsWith('/afficheurs/arrivees/eva')) {
    return <AfficheurViewportWrapper><EVAArrivees /></AfficheurViewportWrapper>;
  }
  if (cleanRoute.startsWith('/afficheurs/arrivees/classiques')) {
    return <AfficheurViewportWrapper><ClassiquesArrivees /></AfficheurViewportWrapper>;
  }

  let content;
  if (cleanRoute === '/departs') {
    content = <Departs onBack={() => navigate(prefix || '/')} navigate={navigate} />;
  } else if (cleanRoute === '/arrivees') {
    content = <Arrivees onBack={() => navigate(prefix || '/')} navigate={navigate} />;
  } else if (cleanRoute === '/select-afficheur') {
    content = <SelectAfficheur onBack={() => {
      const params = new URLSearchParams(window.location.search);
      const gare = params.get('gare') || '';
      const mode = params.get('mode') || 'departs';
      navigate(`${prefix}/afficheurs/${encodeURIComponent(gare)}?mode=${mode}`);
    }} navigate={navigate} />;
  } else if (cleanRoute.startsWith('/afficheurs')) {
    content = <Displays onBack={() => navigate(prefix || '/')} navigate={navigate} />;
  } else {
    content = <Home navigate={navigate} prefix={prefix} source={source} />;
  }

  return (
    <div className="sncf-voyageurs" style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <wcs-galactic app-name="Affichage Ferroviaire" version="1.0.0">

        <wcs-galactic-menu-item>
          {source === 'supabase' ? (
            <a
              href="/"
              onClick={(e) => { e.preventDefault(); navigate('/'); }}
              style={{ color: '#008b47', fontWeight: 600 }}
              title="Basculer vers le mode SNCF GTFS"
            >
              🌐 Passer en mode SNCF Live
            </a>
          ) : (
              <a></a>
          )}
        </wcs-galactic-menu-item>
      </wcs-galactic>

      <header style={{ padding: 12, background: source === 'supabase' ? '#003366' : '#00439e', color: '#fff', transition: 'background 0.3s' }}>
        <div style={{ maxWidth: 1000, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <h1 style={{ margin: 0, fontSize: 20 }}>
              {source === 'supabase' ? 'Affichage Ferroviaire — BDD Supabase (/ferrovia)' : 'Affichage Ferroviaire — SNCF GTFS / Temps Réel'}
            </h1>
            <div style={{ fontSize: 12, opacity: 0.9 }}>Route actuelle: {route}</div>
          </div>
          <div style={{ fontSize: '13px', background: 'rgba(255,255,255,0.15)', padding: '6px 12px', borderRadius: '6px' }}>
            Source: <strong>{source === 'supabase' ? 'Supabase Database' : 'SNCF Open Data / GTFS'}</strong>
          </div>
        </div>
      </header>

      <main style={{ flex: 1, background: '#f3f6fb' }}>
        <div style={{ maxWidth: 1000, margin: '24px auto' }}>{content}</div>
      </main>

      <wcs-footer>
        <wcs-footer-item>
          <a href="/contact">Contact</a>
        </wcs-footer-item>
        <wcs-footer-item>
          <a href="/mentions-legales">Mentions Légales</a>
        </wcs-footer-item>
      </wcs-footer>
    </div>
  );
}

export default App;