import { Meta, Story } from '@storybook/addon-docs';
import * as AccessStories from './Vuetify.stories';
import '../../styles/shared.css';

<Meta of={AccessStories} />

<style>
{
  `
    /* Variables CSS basées sur les couleurs du thème CNAM */
    :root {
      --primary-color: #0c419a; /* blue.base */
      --primary-light: #3d67ae; /* blue.lighten20 */
      --accent-color: #00a5df; /* cyan.base */
      --error-color: #e04f39; /* orange.base */
      --warning-color: #f0b323; /* yellow.base */
      --success-color: #56c271; /* green.base */
      --text-color: #020d1f; /* blue.darken80 */
      --background-light: #f8f9fc; /* blue.lighten97 */
      --card-shadow: 0 4px 12px rgba(12, 65, 154, 0.05);
      --transition-speed: 0.3s;
      --border-radius: 8px;
    }
    
    /* Styles globaux */
    .vuetify-container {
      font-family: 'Roboto', sans-serif;
      color: var(--text-color);
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
    }
    
       
    .section-title {
      color: var(--primary-color);
      font-size: 1.5rem;
      margin-top: 2rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid rgba(24, 103, 192, 0.2);
    }
    
    .info-box {
      background-color: var(--background-light);
      border-radius: var(--border-radius);
      padding: 1.5rem;
      margin: 1.5rem 0;
      box-shadow: var(--card-shadow);
    }
    
    .info-box h3 {
      color: var(--primary-color);
      margin-top: 0;
    }
    
    .accessibility-issues {
      border-left: 4px solid var(--primary-color);
      background-color: rgba(24, 103, 192, 0.05);
    }
    
    .issues-link {
      color: var(--accent-color);
      text-decoration: none;
      padding: 0.25rem 0.5rem;
      border-radius: var(--border-radius);
      background-color: rgba(0, 165, 223, 0.1);
      transition: all var(--transition-speed);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .issues-link:hover, .issues-link:focus {
      background-color: rgba(0, 165, 223, 0.2);
      box-shadow: 0 2px 4px rgba(0, 165, 223, 0.2);
      text-decoration: underline;
    }
    
    .legend-container {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    
    .legend-item {
      display: flex;
      align-items: center;
      padding: 0.5rem 1rem;
      border-radius: var(--border-radius);
      background-color: white;
      box-shadow: var(--card-shadow);
    }
    
    .legend-icon {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      margin-right: 0.5rem;
    }
    
    .legend-icon.success {
      background-color: var(--success-color);
    }
    
    .legend-icon.error {
      background-color: var(--error-color);
    }
    
    .legend-icon.warning {
      background-color: var(--warning-color);
    }
    
    .panel-container {
      margin-top: 2rem;
    }
  `
}
</style>

<div className="vuetify-container">
  <div className="header">
    <h1>Audit d'accessibilité des composants Vuetify</h1>
    <p>Tableau de bord de l'état d'accessibilité des composants Vuetify</p>
  </div>

    <div className="info-box accessibility-issues">
    <h3>⚠️ Issues d'accessibilité Vuetify</h3>
    <p>
      Vous pouvez suivre les problèmes d'accessibilité officiels de Vuetify sur GitHub. 
      Consultez les <a href="https://github.com/vuetifyjs/vuetify/issues?q=is%3Aissue%20state%3Aopen%20label%3Aa11y" target="_blank" rel="noopener noreferrer" className="issues-link">
        <strong>issues d'accessibilité</strong>
      </a> pour rester informé des derniers développements et corrections.
    </p>
    <p>
      La participation de la communauté est essentielle pour améliorer l'accessibilité de Vuetify. 
      N'hésitez pas à signaler de nouveaux problèmes ou à proposer des solutions aux problèmes existants.
    </p>
  </div>
  
  
  <h2 className="section-title">Présentation</h2>
  
  <div className="info-box">
    <h3>🔍 À propos de cet audit</h3>
    <p>Cet outil permet d'évaluer la conformité des composants Vuetify aux critères du <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr> version 4.1.</p>
    <p>Pour chaque composant, vous pouvez consulter :</p>
    <ul>
      <li>Les erreurs bloquantes qui empêchent la conformité</li>
      <li>Les erreurs indéterminées qui nécessitent une vérification manuelle</li>
      <li>Les solutions recommandées pour corriger les problèmes identifiés</li>
    </ul>
  </div>

  
  <h2 className="section-title">Légende</h2>
  
  <div className="legend-container">
    <Story of={AccessStories.Legende} />
  </div>
  
  <h2 className="section-title">Tableau de bord des composants</h2>
  
  <div className="panel-container">
    <Story of={AccessStories.VuetifyPanel} />
  </div>
</div>