# language: fr

@ui @moderation @signalement
Fonctionnalité: Interface de signalement de contenu (Mobile)
  En tant qu'utilisateur de l'application mobile
  Je veux pouvoir signaler un contenu inapproprié facilement
  Afin de contribuer à améliorer la qualité de la plateforme

  # 14.1 - Interface de signalement utilisateur

  Contexte:
    Étant donné que je suis connecté à l'application mobile
    Et que je suis en train d'écouter un contenu

  # Accès au formulaire de signalement

  Scénario: Accéder au signalement depuis le player audio
    Étant donné que j'écoute un contenu audio
    Quand j'ouvre le menu "⋮" du player
    Alors je vois l'option "🚫 Signaler ce contenu"
    Et l'option est facilement accessible (3ème position)
    Et l'icône est rouge pour la visibilité

  Scénario: Accéder au signalement depuis la page de détails
    Étant donné que je consulte la page de détails d'un contenu
    Quand j'ouvre le menu "⋮" en haut à droite
    Alors je vois l'option "🚫 Signaler ce contenu"
    Et je peux ouvrir le formulaire de signalement

  Scénario: Accéder au signalement depuis l'historique d'écoute
    Étant donné que je consulte mon historique d'écoute
    Quand je fais un appui long sur un contenu
    Alors un menu contextuel s'affiche
    Et je vois l'option "🚫 Signaler"
    Et je peux signaler le contenu même si je ne l'écoute plus

  # Formulaire de signalement - Design et UX

  Scénario: Affichage du formulaire de signalement
    Étant donné que je clique sur "Signaler ce contenu"
    Quand le formulaire s'affiche
    Alors il apparaît en modal plein écran (iOS) ou bottom sheet (Android)
    Et le titre est "Signaler ce contenu"
    Et je vois le nom du contenu et le créateur en haut
    Et le formulaire contient:
      | élément                    | type                  | obligatoire |
      | Catégorie du problème      | Liste déroulante      | oui         |
      | Commentaire                | Zone texte            | non*        |
      | Bouton Annuler             | Secondaire (gris)     | -           |
      | Bouton Envoyer             | Primaire (rouge)      | -           |
    Et le bouton "Envoyer" est désactivé tant qu'aucune catégorie n'est sélectionnée

  Scénario: Design responsive du formulaire
    Étant donné que le formulaire de signalement est affiché
    Quand je vérifie l'adaptation de l'interface
    Alors sur petit écran (<375px), le texte est réduit mais lisible
    Et sur grand écran (>414px), le formulaire utilise l'espace disponible
    Et le clavier ne masque pas le bouton "Envoyer"
    Et je peux scroller si le contenu dépasse la hauteur de l'écran

  # Liste des catégories avec icônes

  Scénario: Affichage des 7 catégories prédéfinies
    Étant donné que le formulaire de signalement est affiché
    Quand je clique sur "Catégorie du problème"
    Alors une liste déroulante s'affiche avec 7 options:
      | icône | catégorie               | description visible en sous-titre       |
      | 🚫    | Haine & violence        | Incitation à la haine, discrimination   |
      | 🔞    | Contenu sexuel          | Pornographie, contenu explicite         |
      | ⚖️    | Illégalité              | Terrorisme, apologie de crimes          |
      | 🎵    | Droits d'auteur         | Musique/contenu protégé non autorisé    |
      | 📧    | Spam                    | Publicité non sollicitée, répétition    |
      | ❌    | Fausse information      | Désinformation santé, sécurité routière |
      | 🔧    | Autre                   | Champ texte obligatoire si sélectionné  |
    Et chaque option affiche l'icône, le titre et la description
    Et la description est en gris clair pour la hiérarchie visuelle

  Scénario: Sélection d'une catégorie
    Étant donné que la liste des catégories est affichée
    Quand je sélectionne "🚫 Haine & violence"
    Alors la liste se ferme
    Et le champ "Catégorie du problème" affiche "🚫 Haine & violence"
    Et le bouton "Envoyer" s'active (devient rouge)
    Et je peux passer au champ commentaire (optionnel)

  Scénario: Animation visuelle lors de la sélection
    Étant donné que je suis sur le formulaire de signalement
    Quand je sélectionne une catégorie
    Alors une animation de validation subtile s'affiche (✓ vert)
    Et le champ commentaire s'anime légèrement pour attirer l'attention
    Et l'UX est fluide et encourageante

  # Catégorie "Autre" avec commentaire obligatoire

  Scénario: Catégorie "Autre" rend le commentaire obligatoire
    Étant donné que le formulaire de signalement est affiché
    Quand je sélectionne "🔧 Autre"
    Alors le champ "Commentaire" affiche un astérisque rouge (*)
    Et le placeholder change en "Décrivez le problème (obligatoire)"
    Et une étiquette "Obligatoire" apparaît en rouge
    Et le bouton "Envoyer" reste désactivé tant que je n'ai pas saisi de commentaire

  Scénario: Validation du commentaire obligatoire pour "Autre"
    Étant donné que j'ai sélectionné "🔧 Autre"
    Et que je n'ai pas rempli le champ commentaire
    Quand je clique sur "Envoyer"
    Alors un message d'erreur s'affiche sous le champ:
      """
      Veuillez décrire le problème (minimum 10 caractères)
      """
    Et le champ commentaire est mis en évidence en rouge
    Et le signalement n'est pas envoyé

  # Champ commentaire - UX et validation

  Scénario: Commentaire optionnel avec incitation
    Étant donné que j'ai sélectionné une catégorie autre que "Autre"
    Quand je consulte le champ "Commentaire"
    Alors le placeholder indique "Décrivez le problème (optionnel mais recommandé)"
    Et aucun astérisque rouge n'est affiché
    Et un compteur "0/500" s'affiche en bas à droite
    Et l'incitation encourage à fournir des détails sans obliger

  Scénario: Compteur de caractères en temps réel
    Étant donné que je suis dans le champ commentaire
    Quand je tape du texte
    Alors le compteur se met à jour en temps réel: "42/500"
    Et quand j'atteins 450 caractères, le compteur passe en orange
    Et quand j'atteins 490 caractères, le compteur passe en rouge
    Et à 500 caractères, le clavier bloque la saisie
    Et un message s'affiche: "Limite atteinte"

  Scénario: Limite stricte de 500 caractères
    Étant donné que j'ai saisi 500 caractères dans le commentaire
    Quand j'essaie de taper un caractère supplémentaire
    Alors le caractère n'est pas accepté
    Et le clavier vibre légèrement (feedback haptique)
    Et le compteur reste à "500/500" en rouge

  # Envoi du signalement

  Scénario: Envoi d'un signalement sans commentaire
    Étant donné que j'ai sélectionné "📧 Spam"
    Et que je n'ai pas rempli le champ commentaire
    Quand je clique sur "Envoyer"
    Alors un loader s'affiche sur le bouton "Envoyer"
    Et le formulaire se ferme après 1 seconde
    Et le signalement est envoyé avec succès
    Et aucune erreur ne s'affiche

  Scénario: Envoi d'un signalement avec commentaire
    Étant donné que j'ai sélectionné "🚫 Haine & violence"
    Et que j'ai saisi "Propos discriminatoires à 2:30"
    Quand je clique sur "Envoyer"
    Alors un loader s'affiche pendant l'envoi
    Et le formulaire se ferme
    Et le signalement est envoyé avec le commentaire
    Et le commentaire sera visible par les modérateurs

  Scénario: Gestion d'erreur lors de l'envoi
    Étant donné que j'ai rempli le formulaire de signalement
    Et que ma connexion réseau est perdue
    Quand je clique sur "Envoyer"
    Alors un message d'erreur s'affiche:
      """
      Impossible d'envoyer le signalement.
      Vérifiez votre connexion internet.
      """
    Et le formulaire reste ouvert avec mes données
    Et je peux réessayer sans perdre ma saisie

  # Toast de confirmation

  Scénario: Toast de confirmation après envoi réussi
    Étant donné que j'ai envoyé un signalement
    Quand le signalement est enregistré avec succès
    Alors un toast notification s'affiche en bas de l'écran
    Et le toast contient:
      | élément              | contenu                                      |
      | Icône                | ✓ (vert)                                     |
      | Message              | Signalement envoyé. Examen sous 24-48h.     |
      | Bouton               | Voir mes signalements                        |
      | Bouton fermer        | × (croix en haut à droite)                   |
    Et le toast s'affiche pendant 5 secondes
    Et je peux le fermer manuellement

  Scénario: Animation du toast
    Étant donné que le signalement est envoyé
    Quand le toast s'affiche
    Alors il apparaît avec une animation slide-up depuis le bas
    Et après 5 secondes, il disparaît avec une animation fade-out
    Et l'animation est fluide et professionnelle

  Scénario: Redirection vers l'historique depuis le toast
    Étant donné que le toast de confirmation est affiché
    Quand je clique sur "Voir mes signalements"
    Alors le toast se ferme
    Et je suis redirigé vers "Profil > Mes signalements"
    Et je vois mon nouveau signalement en tête de liste
    Et le statut est "En cours 🔍"

  # Modal de découverte au premier signalement

  Scénario: Découverte du système de badges au 1er signalement
    Étant donné que je viens d'envoyer mon tout premier signalement
    Et que le toast de confirmation s'est affiché
    Quand 2 secondes se sont écoulées
    Alors une modal d'information s'affiche par-dessus
    Et la modal contient le titre "🎯 Bravo ! Vous contribuez à une communauté plus saine"
    Et la modal explique le système de badges:
      """
      🥉 Bronze : 5 signalements validés
      🥈 Argent : 20 signalements validés
      🥇 Or : 50 signalements validés → -50% Premium 3 mois
      """
    Et la modal contient 2 boutons:
      | bouton           | action                              |
      | En savoir plus   | Ouvre page dédiée badges            |
      | J'ai compris     | Ferme la modal                      |
    Et cette modal ne se réaffiche jamais

  Scénario: Modal responsive et accessible
    Étant donné que la modal de découverte s'affiche
    Quand je vérifie l'accessibilité
    Alors la modal est centrée sur l'écran
    Et le fond est assombri (overlay semi-transparent)
    Et je ne peux pas interagir avec l'écran en arrière-plan
    Et je peux fermer en cliquant hors de la modal
    Et le texte est lisible (contraste WCAG AA)

  # Limite de signalements déjà effectués

  Scénario: Impossible de signaler deux fois le même contenu
    Étant donné que j'ai déjà signalé ce contenu il y a 3 jours
    Quand j'ouvre le menu "⋮" du contenu
    Alors l'option "Signaler" est désactivée (grisée)
    Et un tooltip s'affiche: "Vous avez déjà signalé ce contenu"
    Et je peux consulter mon signalement précédent via le tooltip (lien)

  Scénario: Redirection vers le signalement existant
    Étant donné que j'ai déjà signalé ce contenu
    Et que l'option "Signaler" est désactivée
    Quand je clique sur le tooltip "Vous avez déjà signalé ce contenu"
    Alors je suis redirigé vers "Mes signalements"
    Et le signalement concerné est mis en évidence
    Et je vois le statut actuel: "En cours 🔍" / "Traité ✓" / "Rejeté ✗"

  # Accessibilité et dark mode

  Scénario: Support du dark mode
    Étant donné que j'ai activé le dark mode sur mon téléphone
    Quand j'ouvre le formulaire de signalement
    Alors le formulaire s'adapte au dark mode:
      | élément                | couleur dark mode        |
      | Fond de la modal       | Gris foncé (#1E1E1E)     |
      | Texte principal        | Blanc (#FFFFFF)          |
      | Texte secondaire       | Gris clair (#B0B0B0)     |
      | Bordures               | Gris moyen (#3E3E3E)     |
      | Bouton Envoyer         | Rouge (#FF4444)          |
    Et le contraste reste suffisant (WCAG AA)

  Scénario: Accessibilité pour lecteur d'écran
    Étant donné que j'utilise un lecteur d'écran (VoiceOver/TalkBack)
    Quand je navigue dans le formulaire de signalement
    Alors chaque élément a un label descriptif:
      | élément                    | label lecteur d'écran                     |
      | Bouton menu                | "Menu du contenu"                         |
      | Option signaler            | "Signaler ce contenu"                     |
      | Liste catégories           | "Sélectionner une catégorie de problème"  |
      | Champ commentaire          | "Commentaire optionnel, 500 caractères maximum" |
      | Bouton Envoyer             | "Envoyer le signalement"                  |
    Et je peux naviguer au clavier (tab/shift-tab)
    Et tous les états (activé/désactivé) sont annoncés

  # Coût et performance

  Scénario: Performance de l'interface
    Étant donné que j'ouvre le formulaire de signalement
    Quand je mesure les performances
    Alors le formulaire s'affiche en <300ms
    Et l'animation est fluide (60 FPS)
    Et l'envoi du signalement prend <2 secondes
    Et l'UX est instantanée et réactive

  Scénario: Coût de développement
    Étant donné que l'interface de signalement est développée
    Quand on évalue le coût
    Alors le développement est 100% interne (Flutter)
    Et aucun service tiers n'est utilisé
    Et le coût opérationnel est de 0€
    Et l'interface est native iOS et Android