import { Meta, Story } from '@storybook/blocks';
import * as StatusPageStories from '../StatusPage.stories.ts';
import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
import {
    AccessibilityGuideLayout,
    CriteriaSection,
    CriteriaCard,
    DemoSection,
    BestPracticesSection,
    ResourcesSection,
} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';

<Meta of={StatusPageStories} />

<AccessibilityGuideLayout
    componentName="StatusPage"
    iconSrc={AccessibilityIcon}
>

    <CriteriaSection>
    		<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
  <ul>
    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h1, défini dans l’implémentation du composant.</li>
      <code>&lt;StatusPage
          :heading-level="1" /&gt; </code>
    
    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
  </ul>
</CriteriaCard>
        <CriteriaCard icon="🔍" title="Structure sémantique">
            <ul>
                <li><strong>Titre de page</strong> : le titre est rendu dans une balise <code>h1</code>, unique et descriptif — lié au conteneur via <code>aria-labelledby</code> lorsque <code>role</code> est défini</li>
                <li><strong>Code d'erreur</strong> : le code (ex. <code>500</code>, <code>404</code>) est précédé du texte masqué visuellement <code>codeErrorText</code> (par défaut <em>"Code d'erreur : "</em>) pour les lecteurs d'écran</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="🔗" title="Liens et boutons">
            <ul>
                <li><strong>Numéros de téléphone</strong> : les numéros de 4 ou 10 chiffres (ex. <code>3646</code>) sont automatiquement transformés en liens <code>tel:</code> cliquables et vocalisables</li>
                <li><strong>Bouton de retour</strong> : rendu via <code>btn-href</code> (balise <code>a</code>) ou <code>btn-link</code> (balise <code>router-link</code>)</li>
                <li><strong>Texte du bouton</strong> : doit être explicite et décrire la destination, ex. <em>"Retour à l'accueil"</em></li>
                <li><strong>Masquage du bouton</strong> : la prop <code>hide-btn</code> permet de masquer le bouton si une alternative de navigation est présente</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="🖼️" title="Illustration">
            <ul>
                <li><strong>Image décorative</strong> : l'illustration doit avoir <code>alt=""</code> et <code>aria-hidden="true"</code> car elle est purement décorative</li>
                <li><strong>Slot illustration</strong> : si une illustration personnalisée est fournie via le slot <code>#illustration</code>, les mêmes règles s'appliquent</li>
                <li><strong>Mise en page adaptive</strong> : la colonne illustration n'est affichée que si le slot est fourni, évitant des zones vides</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="📝" title="Contenu additionnel">
            <ul>
                <li><strong>Slot <code>additional-content</code></strong> : destiné à du contenu textuel complémentaire (ex. identifiant de support), doit rester lisible par les lecteurs d'écran</li>
                <li><strong>Slot <code>action</code></strong> : permet d'ajouter des actions supplémentaires accessibles au clavier</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="🏷️" title="Rôle et identifiant ARIA">
            <ul>
                <li><strong>Prop <code>role</code></strong> : deux valeurs acceptées: <code>main</code> ou <code>region</code> — propagé au <code>PageContainer</code></li>
                <li><strong>Prop <code>uniqueId</code></strong> : identifiant unique du conteneur, généré automatiquement via <code>useId()</code> si non fourni — utilisé pour lier le <code>h1</code> au conteneur via <code>aria-labelledby</code> lorsque <code>role</code> est défini</li>
                <li><strong>Liaison automatique</strong> : quand <code>role</code> est défini, <code>aria-labelledby</code> est automatiquement appliqué sur le <code>PageContainer</code> et l'<code>id</code> correspondant sur le <code>h1</code></li>
            </ul>
        </CriteriaCard>
    </CriteriaSection>

    <DemoSection title="Avec illustration personnalisée" componentName="StatusPage">
        <Story of={StatusPageStories.CustomIllustration} />
    </DemoSection>

    <DemoSection title="Avec rôle défini" componentName="StatusPage">
        <Story of={StatusPageStories.WithRole} />
    </DemoSection>

    <BestPracticesSection>
        <ul>
            <li>Toujours renseigner <code>page-title</code> avec un titre clair et unique décrivant l'erreur</li>
            <li>Personnaliser <code>code-error-text</code> si nécessaire pour un contexte métier spécifique</li>
            <li>Fournir un <code>btn-text</code> explicite — éviter les libellés génériques comme <em>"Cliquez ici"</em></li>
            <li>Ne pas masquer le bouton (<code>hide-btn</code>) sans proposer une alternative de navigation claire</li>
            <li>Les illustrations doivent toujours être décoratives (<code>aria-hidden="true"</code>) — ne jamais y placer d'information essentielle</li>
            <li>Le contenu dans <code>additional-content</code> doit être lisible par les lecteurs d'écran : éviter le contenu purement visuel</li>
            <li>Utiliser la prop <code>role</code> pour définir le rôle ARIA approprié au contexte</li>
            <li>Fournir un <code>uniqueId</code> explicite si nécessaire pour garantir une liaison correcte entre le conteneur et le titre</li>
        </ul>
    </BestPracticesSection>

    <ResourcesSection>
        <ul>
            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 1.3.1 – Info and Relationships</a></li>
            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 2.4.4 – Link Purpose</a></li>
            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 1.1.1 – Non-text Content</a></li>
            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/" target="_blank" style={{ color: '#0C41BD' }}>ARIA Authoring Practices Guide</a></li>
        </ul>
    </ResourcesSection>

</AccessibilityGuideLayout>