import React from 'react';
import WcsButton from '../components/WcsButton';
import sessionMemory from '../lib/sessionMemory';
import { getSourceFromPath } from '../services/railwayService';

export default function Displays({ onBack, navigate }) {
  const source = getSourceFromPath(window.location.pathname);
  const prefix = source === 'supabase' ? '/ferrovia' : '';

  const types = [
    { id: 'classiques', label: 'Classiques' },
    { id: 'eva', label: 'EVA' },
    { id: 'afl', label: 'AFL' },
    { id: 'transilien', label: 'TRANSILIEN' }
  ];

  // Nettoyage du chemin pour extraire la gare même avec /ferrovia
  const cleanPath = (typeof window !== 'undefined' ? window.location.pathname : '').replace(/^\/ferrovia/, '');
  const parts = cleanPath.split('/').filter(Boolean);
  const typeIds = types.map(t => t.id);
  let gare = null;

  if (parts[0] === 'afficheurs' && parts[1] && !typeIds.includes(parts[1])) {
    try {
      gare = decodeURIComponent(parts.slice(1).join('/'));
    } catch (e) {
      gare = parts.slice(1).join('/');
    }
  } else {
    const paramsForGare = new URLSearchParams(window.location.search || '');
    const g = paramsForGare.get('gare');
    if (g) {
      try {
        gare = decodeURIComponent(String(g).replace(/\+/g, ' ')).replace(/-/g, ' ');
      } catch (e) {
        gare = String(g).replace(/-/g, ' ');
      }
    }
  }

  // Déterminer le mode (departs/arrivees)
  const params = new URLSearchParams(window.location.search || '');
  let mode = params.get('mode');
  if (!mode) {
    try {
      const stored = sessionMemory.get('afficheurMode');
      if (stored) mode = stored;
    } catch (e) {}
  }
  if (!mode) mode = 'departs';

  return (
    <div style={{ padding: 20 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <h1 style={{ margin: 0 }}>Choisissez un type d'afficheur</h1>
        <span style={{
          fontSize: '12px',
          fontWeight: '600',
          padding: '4px 10px',
          borderRadius: '12px',
          background: source === 'supabase' ? '#e6f4ea' : '#e8f0fe',
          color: source === 'supabase' ? '#137333' : '#1a73e8'
        }}>
          {source === 'supabase' ? '🗄️ BDD Ferrovia' : '🌐 SNCF (GTFS)'}
        </span>
      </div>

      {gare && <p>Gare sélectionnée : <strong>{gare}</strong></p>}
      <p>Mode sélectionné : <strong>{mode === 'arrivees' ? 'Arrivées' : 'Départs'}</strong></p>

      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 16 }}>
        {types.map((t) => (
          <div
            key={t.id}
            role="button"
            tabIndex={0}
            style={{ width: 220, padding: 16, borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.08)', background: '#fff', cursor: 'pointer' }}
            onClick={() => {
              if (typeof navigate === 'function') {
                const kebab = gare ? String(gare).trim().replace(/\s+/g, '-').replace(/\//g, '/') : '';
                navigate(`${prefix}/select-afficheur?gare=${encodeURIComponent(kebab)}&mode=${mode}&type=${t.id}`);
                return;
              }
              alert(`${t.label} pour ${gare || '—'}`);
            }}
          >
            <h3 style={{ margin: '0 0 8px' }}>{t.label}</h3>
            <p style={{ margin: 0, color: '#555' }}>Afficher le style {t.label} pour la gare {gare || ''}.</p>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 24 }}>
        <WcsButton
          mode="plain"
          className="wcs-primary"
          onClick={() => {
            try {
              if (typeof onBack === 'function') {
                onBack();
                return;
              }
            } catch (e) {}

            if (typeof window !== 'undefined' && window.history && window.history.length > 1) {
              window.history.back();
            } else {
              window.location.href = prefix || '/';
            }
          }}
          label="Retour"
        />
      </div>
    </div>
  );
}