import { Meta, Story } from '@storybook/addon-docs';
import * as Stories from '../MaintenancePage.stories.ts';
import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
import '@/stories/styles/shared.css';
import {
    AccessibilityGuideLayout,
    CriteriaSection,
    CriteriaCard,
    DemoSection,
    BestPracticesSection,
    ResourcesSection,
} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';

<Meta of={Stories} />

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

<div class="mt-2">
    <p>Rapport d'audit manuel : <a href="/audits/MaintenancePage.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
    <p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/653" target="_blank" style={{color:'#0C41BD'}}>issue #653</a>)</p>
</div>

    <CriteriaSection>
        <CriteriaCard icon="🔍" title="Structure sémantique">
            <ul>
                <li><strong>Titre de page</strong> : rendu dans une balise <code>h1</code> via <code>StatusPage</code>, sa valeur provient des locales du thème via <code>useThemeLocales</code></li>
                <li><strong>Code d'erreur</strong> : le 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>
                <li><strong>Valeurs par défaut</strong> : <code>pageTitle</code>, <code>message</code> <code>src</code> et <code>code</code> proviennent des locales du thème via <code>useThemeLocales</code></li>
                <li><strong>Prop <code>uniqueId</code></strong> : permet de définir un identifiant unique sur le conteneur, facilitant le ciblage par <code>aria-labelledby</code> ou <code>aria-describedby</code> depuis d'autres éléments</li>
                <li><strong>Prop <code>role</code></strong> : aucune prop <code>role</code> n'est exposée sur ce composant — la page de maintenance est une page statique d'information, sa structure sémantique (<code>h1</code>, paragraphe) suffit à en exprimer le rôle sans qu'un attribut ARIA <code>role</code> supplémentaire soit nécessaire ; l'exposer risquerait d'introduire de mauvaises utilisations (ex. <code>role="alert"</code> inapproprié) pouvant nuire à l'expérience des utilisateurs de lecteurs d'écran</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="🔗" title="Navigation">
            <ul>
                <li><strong>Bouton masqué par défaut</strong> : la prop <code>hide-btn</code> est fixée à <code>true</code> — la page de maintenance ne propose pas de navigation vers une autre page</li>
                <li><strong>Pas de lien de retour</strong> : intentionnel car l'application est indisponible, évitant ainsi de rediriger vers une page inaccessible</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="🖼️" title="Illustration">
            <ul>
                <li><strong>Image décorative</strong> : l'illustration par défaut possède <code>alt=""</code> et <code>aria-hidden="true"</code> car elle est purement décorative</li>
                <li><strong>Source thémable</strong> : l'image source provient des locales du thème via <code>useThemeLocales</code></li>
                <li><strong>Slot <code>#illustration</code></strong> : si une illustration personnalisée est fournie, les mêmes règles d'accessibilité s'appliquent</li>
                <li><strong>Mise en page adaptive</strong> : la colonne illustration n'est affichée que si <code>src</code> ou le slot <code>#illustration</code> est fourni</li>
            </ul>
        </CriteriaCard>
    </CriteriaSection>

    <BestPracticesSection>
        <ul>
            <li>Les valeurs par défaut de <code>page-title</code>, <code>message</code> et <code>code</code> proviennent du thème — les surcharger uniquement si le contexte métier le nécessite</li>
            <li>Ne pas afficher de bouton de retour (<code>hide-btn="true"</code> par défaut) — l'application étant indisponible, un lien de retour serait inutile voire trompeur</li>
            <li>Les illustrations doivent toujours être décoratives (<code>aria-hidden="true"</code>) — ne jamais y placer d'information essentielle</li>
            <li>Le slot <code>#illustration</code> personnalisé doit respecter les mêmes règles : <code>alt=""</code> et <code>aria-hidden="true"</code> si l'image est décorative</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>