import os

file_path = r"c:\Users\mathi\Documents\Développement WEB\ferrovia-infogare\src\App.js"

with open(file_path, "r", encoding="utf-8") as f:
    content = f.read()

# Make the changes in App.js for the Home component
new_content = content.replace(
    "import React, { useEffect, useState } from 'react';",
    "import React, { useEffect, useState } from 'react';\nimport { WcsCard, WcsCardBody, WcsButton, WcsBadge } from 'wcs-react';"
)

home_component_old = """    return (
      <div className="launcher-container">
        {/* Carte de bienvenue */}
        <div className="launcher-card">
          <div className="launcher-header">
            <div>
              <h1 className="launcher-title">🚅 Téléaffichage Ferroviaire SNCF</h1>
              <p className="launcher-subtitle">
                {source === 'supabase'
                  ? "Consultez les afficheurs basés sur les données de votre BDD Supabase."
                  : "Simulateur d'écrans de gare officiels connectés en direct aux flux GTFS & Open Data SNCF."}
              </p>
            </div>
            <span className={`launcher-badge ${source === 'supabase' ? 'launcher-badge--supabase' : ''}`}>
              {source === 'supabase' ? '🗄️ Mode Supabase' : '🌐 Mode SNCF Live'}
            </span>
          </div>

          {/* Cartes principales : Départs / Arrivées */}
          <div className="launcher-grid launcher-grid--2col">
            <div
              className="launcher-select-card"
              role="button"
              tabIndex={0}
              onClick={() => {
                try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
                navigate(`${prefix}/departs`);
              }}
              onKeyDown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
                  navigate(`${prefix}/departs`);
                }
              }}
            >
              <div>
                <span className="launcher-card-icon">🚆</span>
                <span className="launcher-card-tag launcher-card-tag--modern">Départs</span>
                <h2 className="launcher-card-title">Prochains Départs</h2>
                <p className="launcher-card-desc">
                  Consultez les trains au départ, leurs voies, retards et dessertes complètes.
                </p>
              </div>
              <div style={{ marginTop: 12 }}>
                <span className="launcher-btn launcher-btn--primary">
                  Consulter les Départs ›
                </span>
              </div>
            </div>

            <div
              className="launcher-select-card"
              role="button"
              tabIndex={0}
              onClick={() => {
                try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {}
                navigate(`${prefix}/arrivees`);
              }}
              onKeyDown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {}
                  navigate(`${prefix}/arrivees`);
                }
              }}
            >
              <div>
                <span className="launcher-card-icon">🏁</span>
                <span className="launcher-card-tag launcher-card-tag--modern">Arrivées</span>
                <h2 className="launcher-card-title">Prochaines Arrivées</h2>
                <p className="launcher-card-desc">
                  Suivez en direct les trains attendus en gare, provenances et voies assignées.
                </p>
              </div>
              <div style={{ marginTop: 12 }}>
                <span className="launcher-btn launcher-btn--secondary">
                  Consulter les Arrivées ›
                </span>
              </div>
            </div>
          </div>

          {/* Raccourcis rapides vers les gares */}
          <div className="launcher-chips-container" style={{ marginTop: '8px' }}>
            <span className="launcher-chips-label">Accès direct par gare :</span>
            <div className="launcher-chips-list">
              {POPULAR_HOME_GARES.map((gName) => (
                <button
                  key={gName}
                  type="button"
                  className="launcher-chip"
                  onClick={() => {
                    try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
                    navigate(`${prefix}/afficheurs/${encodeURIComponent(gName)}?mode=departs`);
                  }}
                >
                  📍 {gName.replace(/-/g, ' ')}
                </button>
              ))}
            </div>
          </div>

          {/* Présentation des types d'afficheurs */}
          <div style={{ borderTop: '1px solid #e2ebf6', paddingTop: '20px', marginTop: '20px' }}>
            <div style={{ fontSize: '13px', color: '#5f6368', lineHeight: 1.6 }}>
              ✨ <strong>Formats disponibles :</strong> Afficheurs Fluides & Lumineux (AFL), Téléaffichage historique (Classiques), Écrans Vidéo Voyageurs (EVA) et Écrans par Quai / Voie.
            </div>
          </div>
        </div>
      </div>
    );"""

home_component_new = """    return (
      <div className="launcher-container" style={{ padding: '24px', maxWidth: '900px', margin: '0 auto' }}>
        <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)' }}>🚅 Téléaffichage Ferroviaire SNCF</h1>
                <p style={{ margin: 0, color: 'var(--wcs-text-light)' }}>
                  {source === 'supabase'
                    ? "Consultez les afficheurs basés sur les données de votre BDD Supabase."
                    : "Simulateur d'écrans de gare officiels connectés en direct aux flux GTFS & Open Data SNCF."}
                </p>
              </div>
              <WcsBadge className={source === 'supabase' ? 'wcs-secondary' : 'wcs-primary'} shape="rounded">
                {source === 'supabase' ? '🗄️ Mode Supabase' : '🌐 Mode SNCF Live'}
              </WcsBadge>
            </div>

            <div style={{ display: 'flex', gap: '24px', flexDirection: 'row', flexWrap: 'wrap', marginBottom: '24px' }}>
              <WcsCard style={{ flex: '1 1 300px', cursor: 'pointer' }} mode="flat" onClick={() => {
                  try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
                  navigate(`${prefix}/departs`);
              }}>
                <WcsCardBody>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span style={{ fontSize: '32px' }}>🚆</span>
                    <WcsBadge className="wcs-success">Départs</WcsBadge>
                  </div>
                  <h2 style={{ fontSize: '18px', marginTop: '16px' }}>Prochains Départs</h2>
                  <p style={{ color: 'var(--wcs-text-light)', minHeight: '60px' }}>Consultez les trains au départ, leurs voies, retards et dessertes complètes.</p>
                  <WcsButton className="wcs-primary" style={{ width: '100%' }}>Consulter les Départs</WcsButton>
                </WcsCardBody>
              </WcsCard>

              <WcsCard style={{ flex: '1 1 300px', cursor: 'pointer' }} mode="flat" onClick={() => {
                  try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {}
                  navigate(`${prefix}/arrivees`);
              }}>
                <WcsCardBody>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span style={{ fontSize: '32px' }}>🏁</span>
                    <WcsBadge className="wcs-info">Arrivées</WcsBadge>
                  </div>
                  <h2 style={{ fontSize: '18px', marginTop: '16px' }}>Prochaines Arrivées</h2>
                  <p style={{ color: 'var(--wcs-text-light)', minHeight: '60px' }}>Suivez en direct les trains attendus en gare, provenances et voies assignées.</p>
                  <WcsButton className="wcs-secondary" style={{ width: '100%' }}>Consulter les Arrivées</WcsButton>
                </WcsCardBody>
              </WcsCard>
            </div>

            <div style={{ marginBottom: '24px' }}>
              <p style={{ fontWeight: 'bold', marginBottom: '12px' }}>Accès direct par gare :</p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                {POPULAR_HOME_GARES.map((gName) => (
                  <WcsButton
                    key={gName}
                    mode="stroked"
                    shape="round"
                    size="s"
                    onClick={() => {
                      try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
                      navigate(`${prefix}/afficheurs/${encodeURIComponent(gName)}?mode=departs`);
                    }}
                  >
                    📍 {gName.replace(/-/g, ' ')}
                  </WcsButton>
                ))}
              </div>
            </div>

            <hr style={{ border: 'none', borderTop: '1px solid var(--wcs-light)', margin: '24px 0' }} />
            <div style={{ fontSize: '14px', color: 'var(--wcs-text-light)', lineHeight: 1.6 }}>
              ✨ <strong>Formats disponibles :</strong> Afficheurs Fluides & Lumineux (AFL), Téléaffichage historique (Classiques), Écrans Vidéo Voyageurs (EVA) et Écrans par Quai / Voie.
            </div>
          </WcsCardBody>
        </WcsCard>
      </div>
    );"""

new_content = new_content.replace(home_component_old, home_component_new)

with open(file_path, "w", encoding="utf-8") as f:
    f.write(new_content)