import React from 'react';
import { WcsCard, WcsCardBody, WcsButton, WcsBadge, WcsHorizontalStepper } from 'wcs-react';
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: 'afl',
      label: 'AFL',
      sublabel: 'Afficheurs Fluides & Lumineux',
      tag: 'Recommandé / Moderne',
      tagType: 'modern',
      icon: '🖥️',
      desc: 'Écrans modernes haute lisibilité avec cycles Départs / Arrivées, Informations trafic, Sécurité et Correspondances.'
    },
    {
      id: 'classiques',
      label: 'Classiques',
      sublabel: 'Téléaffichage Historique',
      tag: 'Rétro / Vintage',
      tagType: 'retro',
      icon: '📺',
      desc: 'Reproduction des moniteurs cathodiques et écrans à palettes historiques des gares SNCF.'
    },
    {
      id: 'eva',
      label: 'EVA',
      sublabel: 'Écrans Vidéo Voyageurs',
      tag: 'Gares Connectées',
      tagType: 'modern',
      icon: '📱',
      desc: "Écrans d'information enrichis avec multimédia, infogare et dessertes complètes."
    },
    {
      id: 'transilien',
      label: 'Transilien',
      sublabel: 'Réseau Île-de-France',
      tag: 'Régional IDF',
      tagType: 'retro',
      icon: '🚊',
      desc: 'Afficheurs dédiés aux lignes RER et Transilien SNCF (lignes C, D, E, H, J, L, N, P, R, U).'
    }
  ];

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

  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';

  const formattedGareName = gare ? gare.replace(/-/g, ' ') : 'Non sélectionnée';

  const steps = [
    { text: formattedGareName, button: { kind: 'Icon', iconName: 'check' }, complete: true },
    { text: "Type d'afficheur", button: { kind: 'Text', text: '2' }, complete: false },
    { text: 'Options & Affichage', button: { kind: 'Text', text: '3' }, disable: true }
  ];

  return (
    <div style={{ maxWidth: '900px', margin: '0 auto', padding: '24px', overflowY: 'auto', maxHeight: 'calc(100vh - 120px)' }}>
      <WcsHorizontalStepper steps={steps} currentStep={1} style={{ marginBottom: '24px' }} />

      <WcsCard mode="raised">
        <WcsCardBody>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '24px' }}>
            <div>
              <h1 style={{ margin: '0 0 8px 0', fontSize: '24px', color: 'var(--wcs-primary)' }}>Sélectionnez le style d'afficheur</h1>
              <p style={{ margin: 0, color: 'var(--wcs-text-light)' }}>
                Gare : <strong>{formattedGareName}</strong> • Mode : <strong>{mode === 'arrivees' ? '🏁 Arrivées' : '🚆 Départs'}</strong>
              </p>
            </div>
            <WcsBadge className={source === 'supabase' ? 'wcs-secondary' : 'wcs-primary'} shape="rounded">
              {source === 'supabase' ? '🗄️ BDD Ferrovia' : '🌐 SNCF GTFS'}
            </WcsBadge>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '16px', marginBottom: '24px' }}>
            {types.map((t) => (
              <WcsCard
                key={t.id}
                mode="flat"
                style={{ cursor: 'pointer', border: '1px solid var(--wcs-light)' }}
                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}`);
                  }
                }}
              >
                <WcsCardBody style={{ padding: '16px', display: 'flex', flexDirection: 'column', height: '100%' }}>
                  <div style={{ marginBottom: '12px' }}>
                    <span style={{ fontSize: '32px', marginRight: '8px' }}>{t.icon}</span>
                    <WcsBadge className={t.tagType === 'retro' ? 'wcs-secondary' : 'wcs-success'}>{t.tag}</WcsBadge>
                  </div>
                  <h2 style={{ fontSize: '18px', margin: '0 0 4px 0', color: 'var(--wcs-primary)' }}>{t.label}</h2>
                  <div style={{ fontSize: '13px', fontWeight: 'bold', color: 'var(--wcs-primary)', marginBottom: '8px' }}>{t.sublabel}</div>
                  <p style={{ fontSize: '14px', color: 'var(--wcs-text-light)', flexGrow: 1, marginBottom: '16px' }}>{t.desc}</p>
                  
                  <WcsButton className="wcs-secondary" style={{ width: '100%', marginTop: 'auto' }}>
                    Choisir ce style
                  </WcsButton>
                </WcsCardBody>
              </WcsCard>
            ))}
          </div>

          <div style={{ borderTop: '1px solid var(--wcs-light)', paddingTop: '16px' }}>
            <WcsButton mode="clear" onClick={() => {
              if (typeof onBack === 'function') {
                onBack();
              } else if (navigate) {
                navigate(`${prefix}/${mode}`);
              }
            }}>
              ← Changer de gare
            </WcsButton>
          </div>
        </WcsCardBody>
      </WcsCard>
    </div>
  );
}