import { Meta, Primary } from '@storybook/blocks';
import * as PhoneFieldStories from '../PhoneField.stories.ts';
import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
import '@/stories/styles/shared.css';

<Meta of={PhoneFieldStories} name="Accessibility" />

<div className="accessibility-guide">
	<div className="header">
		<h1>Guide d'Accessibilité du Composant PhoneField</h1>
	</div>

	<div className="intro-section">
		<img
			src={AccessibilityIcon}
			alt="Icône d'accessibilité"
			className="accessibility-icon"
		/>
		<p className="intro-text">
			Le composant PhoneField a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C,
			notamment le modèle <a href="https://www.w3.org/WAI/tutorials/forms/" target="_blank" rel="noopener noreferrer">WAI-ARIA pour les champs de formulaire</a>.
			Ce guide détaille comment notre implémentation respecte ces standards et garantit une expérience utilisateur inclusive.
		</p>
	</div>

	<div className="criteria-section">
		<h2>Critères d'accessibilité respectés</h2>

		<div className="criteria-card">
			<div className="criteria-header">
				<span className="criteria-icon">🔍</span>
				<h3>Structure sémantique</h3>
			</div>
			<ul>
				<li><strong>Regroupement</strong> : Lorsque l'indicatif pays est affiché, les deux champs (indicatif et numéro) sont regroupés dans un <code>fieldset</code> avec une <code>legend</code> associée.</li>
				<li><strong>Étiquetage explicite</strong> : Chaque champ dispose d'un label associé via la prop <code>label</code>.</li>
				<li>
					<strong>Attributs autocomplete</strong> : Les attributs <code>autocomplete</code> sont configurables via <code>autocompleteCountryCode</code> et <code>autocompletePhone</code>.
					Choisissez la valeur adaptée à votre scénario (<a href="https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose" target="_blank" rel="noopener noreferrer">WCAG 1.3.5</a>) :
					<table className="autocomplete-table">
						<thead>
							<tr>
								<th>Scénario</th>
								<th>Prop</th>
								<th>Valeur recommandée</th>
								<th>Source</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><strong>Code pays</strong> (ex : +33) — champ séparé</td>
								<td><code>autocompleteCountryCode</code></td>
								<td><code>tel-country-code</code></td>
								<td><a href="https://html.spec.whatwg.org/#autofill-field-tel-country-code" target="_blank" rel="noopener noreferrer">WHATWG</a></td>
							</tr>
							<tr>
								<td><strong>Numéro sans indicatif</strong> (ex : 06 12 34 56 78) — avec <code>withCountryCode</code></td>
								<td><code>autocompletePhone</code></td>
								<td><code>tel-national</code></td>
								<td><a href="https://html.spec.whatwg.org/#autofill-field-tel-national" target="_blank" rel="noopener noreferrer">WHATWG</a></td>
							</tr>
							<tr>
								<td><strong>Numéro complet</strong> (indicatif intégré) — sans <code>withCountryCode</code></td>
								<td><code>autocompletePhone</code></td>
								<td><code>tel</code></td>
								<td><a href="https://html.spec.whatwg.org/#autofill-field-tel" target="_blank" rel="noopener noreferrer">WHATWG</a></td>
							</tr>
							<tr>
								<td><strong>Extension / poste</strong></td>
								<td><code>autocompletePhone</code></td>
								<td><code>tel-extension</code></td>
								<td><a href="https://html.spec.whatwg.org/#autofill-field-tel-extension" target="_blank" rel="noopener noreferrer">WHATWG</a></td>
							</tr>
						</tbody>
					</table>
				</li>
			</ul>
		</div>

		<div className="criteria-card">
			<div className="criteria-header">
				<span className="criteria-icon">⌨️</span>
				<h3>Navigation clavier complète</h3>
			</div>
			<ul>
				<li><strong>Touche Tab</strong> : Navigation séquentielle entre le sélecteur d'indicatif et le champ numéro.</li>
				<li><strong>Sélecteur d'indicatif</strong> : Navigation clavier complète dans la liste déroulante des pays.</li>
				<li><strong>Focus visible</strong> : Indication claire de l'élément actuellement focalisé sur chaque champ.</li>
			</ul>
		</div>

		<div className="criteria-card">
			<div className="criteria-header">
				<span className="criteria-icon">📱</span>
				<h3>États et retours d'information</h3>
			</div>
			<ul>
				<li><strong>État requis</strong> : Support du mode <code>required</code> et affichage d'un message d'erreur en cas de soumission invalide.</li>
				<li><strong>État d'erreur</strong> : Un message d'erreur et une icône rouge sont affichés sous le champ lorsque la valeur saisie est invalide.</li>
				<li><strong>État de succès</strong> : Un message de confirmation et une icône verte indiquent que la valeur saisie est valide.</li>
				<li><strong>États disabled / readonly</strong> : Les états sont communiqués visuellement et empêchent l'interaction selon le cas.</li>
				<li><strong>Texte d'aide</strong> : La prop <code>helpText</code> permet d'afficher une aide à la saisie sous le champ.</li>
				<li><strong>Retour textuel</strong> : Les messages de validation sont affichés dans la zone dédiée aux détails.</li>
			</ul>
		</div>

		<div className="criteria-card">
			<div className="criteria-header">
				<span className="criteria-icon">🎨</span>
				<h3>Personnalisation accessible</h3>
			</div>
			<ul>
				<li><strong>Format d'affichage</strong> : La prop <code>displayFormat</code> permet d'adapter l'affichage des indicatifs (code, pays, abréviation) sans casser l'accessibilité.</li>
				<li><strong>Astérisque visuel</strong> : La prop <code>displayAsterisk</code> permet d'afficher un indicateur visuel de champ requis.</li>
				<li><strong>Couleur de fond</strong> : La prop <code>bgColor</code> permet d'adapter l'apparence tout en conservant les états d'erreur (prioritaires).</li>
			</ul>
		</div>
	</div>

	<div className="demo-section">
		<h2>Démonstration interactive</h2>
		<p>
			Explorez ci-dessous un exemple de PhoneField. Essayez de naviguer en utilisant uniquement votre clavier (Tab pour naviguer, saisie directe dans les champs)
			pour tester l'accessibilité.
		</p>
		<Primary />
	</div>

	<div className="best-practices">
		<h2>Bonnes pratiques d'utilisation</h2>
		<ul>
			<li>Utilisez un libellé explicite pour chaque champ téléphone afin d'informer clairement l'utilisateur du format attendu.</li>
			<li>Les attributs <code>autocomplete</code> sont préconfigurés par défaut (<code>autocompleteCountryCode</code> : <code>"tel-country-code"</code>, <code>autocompletePhone</code> : <code>"tel-national"</code>) et couvrent la majorité des cas d'usage. Adaptez-les si nécessaire (ex. <code>"tel"</code> pour un numéro complet avec indicatif intégré).</li>
			<li>Pour un champ requis, expliquez clairement la contrainte via la prop <code>helpText</code>.</li>
			<li>Évitez de baser le sens uniquement sur la couleur (toujours fournir un message textuel).</li>
			<li>Assurez-vous que les zones cliquables restent confortables sur mobile.</li>
		</ul>
	</div>

	<div className="resources-section">
		<h2>Ressources supplémentaires</h2>
		<ul>
			<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H44" target="_blank" rel="noopener noreferrer">WCAG – Utilisation des labels pour les contrôles de formulaire (H44)</a></li>
			<li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
			<li><a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill" target="_blank" rel="noopener noreferrer">Spécification HTML – Attribut autocomplete</a></li>
		</ul>
	</div>
</div>

<style>
{`
  .accessibility-guide {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: #333;
  }

  .intro-section {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 5px solid #0077cc;
  }

  .accessibility-icon {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    flex-shrink: 0;
  }

  .intro-text {
    font-size: 1.1em;
    line-height: 1.6;
    margin: 0;
  }

  .criteria-section {
    margin-bottom: 40px;
  }

  .criteria-section h2,
  .demo-section h2,
  .best-practices h2,
  .resources-section h2 {
    border-bottom: 2px solid #eaecef;
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
    color: #0077cc;
  }

  .criteria-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
  }

  .criteria-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .criteria-icon {
    font-size: 1.8em;
    margin-right: 15px;
  }

  .criteria-header h3 {
    margin: 0;
    font-size: 1.3em;
    color: #0077cc;
  }

  .criteria-card ul {
    margin: 0;
    padding-left: 20px;
  }

  .criteria-card li {
    margin-bottom: 8px;
    line-height: 1.5;
  }

  .demo-section {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
  }

  .best-practices {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
  }

  .best-practices ul {
    padding-left: 20px;
  }

  .best-practices li {
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .resources-section {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
  }

  .resources-section ul {
    padding-left: 20px;
  }

  .resources-section li {
    margin-bottom: 10px;
  }

  .resources-section a {
    color: #0077cc;
    text-decoration: none;
  }

  .resources-section a:hover {
    text-decoration: underline;
  }

  .autocomplete-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.9em;
  }

  .autocomplete-table th,
  .autocomplete-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
  }

  .autocomplete-table th {
    background-color: #f0f4f8;
    color: #0077cc;
    font-weight: 600;
  }

  .autocomplete-table tr:nth-child(even) td {
    background-color: #f9f9f9;
  }

  code {
    background-color: #f0f0f0;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
  }
`}
</style>