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

<Meta of={Stories} />

<AccessibilityGuideLayout
    componentName="PaginatedTable"
    iconSrc={AccessibilityIcon}
>
    <AuditSection>
        <div>Rapport d’audit manuel :{' '}
            <a href="/audits/PaginatedTable.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></div>
        <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>
            Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/914" target="_blank" rel="noopener noreferrer" style={{color: '#0C41BD'}}>issue #914</a>)
        </div>
    </AuditSection>

    <CriteriaSection>
        <CriteriaCard icon="🏷️" title="Structure et rôles">
            <ul>
                <li>Le composant repose sur <code>VDataTable</code> ou <code>VDataTableServer</code> et conserve la structure sémantique native d’un tableau HTML (<code>table</code>, <code>caption</code>, <code>thead</code>, <code>tbody</code>, <code>th</code>, <code>td</code>).</li>
                <li>Une légende (<code>caption</code>) est injectée dynamiquement au montage et reste accessible via <code>d-sr-only</code> si elle est visuellement masquée.</li>
                <li>Les en-têtes utilisent des cellules <code>th</code> avec <code>scope="col"</code> et exposent les états de tri via <code>aria-sort</code>.</li>
                <li>Les options de pagination et de tri sont exposées via des composants natifs (<code>Pagination</code>, sélecteurs Vuetify).</li>
                <li>Les slots permettent d’étendre le tableau sans casser la sémantique native.</li>
                <li>L’état de tri, pagination et groupement peut être persisté sans impacter la structure accessible.</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="⌨️" title="Navigation clavier">
            <ul>
                <li>Les en-têtes de colonnes sont focalisables via <code>tabindex="0"</code>.</li>
                <li>Les actions de tri sont accessibles au clavier via Entrée ou Espace.</li>
                <li>La pagination est entièrement navigable au clavier (page, items par page).</li>
                <li>Le sélecteur « éléments par page » est accessible et correctement libellé.</li>
                <li>Les champs de filtre et composants injectés restent accessibles dans l’ordre de tabulation.</li>
                <li>Les interactions dynamiques ne bloquent pas la navigation clavier.</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="📢" title="Annonces aux technologies d’assistance">
            <ul>
                <li>Le <code>caption</code> fournit un contexte global pour la lecture du tableau.</li>
                <li>Les changements de pagination et de tri sont restitués via les attributs ARIA des en-têtes.</li>
                <li>Les champs « éléments par page » sont annoncés avec un libellé explicite.</li>
                <li>Les suppressions d’attributs comme <code>aria-describedby</code> évitent les annonces redondantes.</li>
                <li>Les modifications d’état du tableau restent cohérentes pour les lecteurs d’écran.</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="🎨" title="Contraste et lisibilité">
            <ul>
                <li>Les styles du design system garantissent un contraste suffisant pour texte, bordures et focus.</li>
                <li>Les en-têtes sont visuellement différenciés via une typographie renforcée.</li>
                <li>Les états actifs (focus, tri, sélection) restent perceptibles visuellement et programmatiquement.</li>
                <li>Les contrôles de pagination et filtres conservent une lisibilité constante sur tous les thèmes.</li>
            </ul>
        </CriteriaCard>

        <CriteriaCard icon="💾" title="Persistance et état">
            <ul>
                <li>L’état du tableau (tri, pagination, groupement) peut être sauvegardé dans le localStorage.</li>
                <li>La restauration de l’état n’altère pas la structure du tableau ni son accessibilité.</li>
                <li>Les préférences utilisateur sont isolées par clé (<code>suffix</code>) pour éviter les collisions.</li>
                <li>Les champs et en-têtes restent accessibles après rechargement.</li>
            </ul>
        </CriteriaCard>
    </CriteriaSection>

    <DemoSection componentName="PaginatedTable">
        <Story of={Stories.Default}/>
    </DemoSection>

    <BestPracticesSection>
        <ul>
            <li>Fournissez toujours un <code>caption</code> explicite pour décrire le contenu du tableau.</li>
            <li>Utilisez des intitulés de colonnes courts, uniques et compréhensibles.</li>
            <li>Évitez de surcharger les slots avec des contrôles non liés au tableau.</li>
            <li>Vérifiez que les interactions de tri restent accessibles uniquement au clavier.</li>
            <li>Testez la restitution des changements (pagination, tri) avec un lecteur d’écran.</li>
            <li>Assurez une cohérence entre les états visuels et les attributs ARIA.</li>
        </ul>
    </BestPracticesSection>

    <ResourcesSection>
        <ul>
            <li><a href="https://www.w3.org/WAI/tutorials/tables/" target="_blank" rel="noopener noreferrer">W3C WAI – Tables Tutorial</a></li>
            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/table/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Table Pattern</a></li>
            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html" target="_blank" rel="noopener noreferrer">WCAG – Status Messages (4.1.3)</a></li>
            <li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 5 (tableaux), 7 (ARIA), 10 (présentation)</a></li>
        </ul>
    </ResourcesSection>
</AccessibilityGuideLayout>