@startuml c4-container
' C4 modèle — Niveau 2 : Conteneurs
' Bibliothèque standard : C4_Container.puml inclut lui-même C4_Context.puml,
' et définit les macros Container / ContainerDb utilisées ici.
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title Conteneurs — Flashcards (Niveau 2)

Person(user, "Utilisateur", "Navigateur / mobile (accès au jeu et au CRUD)")

System_Boundary(flashcards, "Application Flashcards") {

    Container(spa, "SPA React (Next.js)", "Web Browser", "Rendu de l'UI, état local, navigation, mode hors-ligne (service worker)")

    Container(api, "API Next.js / App Router", "Node.js", "CardController > CardService : liste, CRUD, tirage aléatoire, thèmes, suggestions de tags. Seul conteneur qui accède aux données.")

    Container(repo, "CardRepository (générique)", "Abstraction de données", "Contracts : findAll, findById, findRandom, findRandomByTheme, findThemes, tags, create, update, delete")

    Container(repoMysql, "Implémentation MySQL", "Library (mysql2)", "Implémentation SQL du repository")
    Container(repoMongo, "Implémentation MongoDB", "Library (mongodb)", "Implémentation Mongo du repository")
}

ContainerDb(mysql, "Base MySQL", "SGBD relationnel", "Persistance des cartes (table cards) + volume Docker")
ContainerDb(mongo, "Base MongoDB", "SGBD documentaire", "Persistance des cartes (collection cards) + volume Docker")

Rel(user, spa, "Navigue et interagit (HTTP/HTTPS)")
Rel(spa, api, "Appels API JSON (jeu, CRUD, révélation)")
Rel(api, repo, "Utilise uniquement l'abstraction")
Rel(repo, repoMysql, "implémente")
Rel(repo, repoMongo, "implémente")
Rel(repoMysql, mysql, "Requêtes SQL (table cards)")
Rel(repoMongo, mongo, "Requêtes Mongo (collection cards)")

@enduml