@startuml c4-container
' C4 modèle — Niveau 2 : Conteneurs (syntaxe native PlantUML, compatible anciennes versions)
' Application web Flashcards (SPA/PWA)

hide stereotype
skinparam backgroundColor #FFFFFF

' ===== Styles par type =====
skinparam rectangle<<person>> {
    BackgroundColor #08427B
    BorderColor #073B6F
    FontColor #FFFFFF
}

skinparam rectangle<<system>> {
    'BackgroundColor #1168BD
    BorderColor #3C7FC0
    FontColor #FFFFFF
}

skinparam rectangle<<container>> {
    BackgroundColor #438DD5
    BorderColor #135F97
    FontColor #FFFFFF
}

skinparam rectangle<<external_system>> {
    BackgroundColor #999999
    BorderColor #8A8A8A
    FontColor #FFFFFF
}

skinparam arrow {
    Color #707070
}

title Conteneurs — Flashcards (Niveau 2)

' ===== Personne =====
rectangle "Utilisateur\nNavigateur / mobile\n(accès au jeu et au CRUD)" <<person>> as User

' ===== Système Flashcards et ses conteneurs =====
rectangle "Application Flashcards [Système]\nSPA/PWA Next.js — double persistance simultanée" <<system>> as Flashcards {

    rectangle "SPA React (Next.js)\n[Conteneur : Web Browser]\nRendu de l'UI, état local, navigation" <<container>> as Spa

    rectangle "API Next.js / App Router\n[Conteneur : Node.js]\nCardController > CardService :\nliste, CRUD, tirage aléatoire, thèmes\n(seul conteneur qui accède aux données)" <<container>> as Api

    rectangle "CardRepository (générique)\n[Abstraction de données]\nContracts : findAll, findById,\nfindRandom, findRandomByTheme,\nfindThemes, create, update, delete" <<container>> as Repo

    rectangle "Implémentation MySQL\n[Conteneur : librairie]\nImplémentation SQL du repository" <<container>> as RepoMysql
    rectangle "Implémentation MongoDB\n[Conteneur : librairie]\nImplémentation Mongo du repository" <<container>> as RepoMongo
}

' ===== Systèmes externes =====
rectangle "Base MySQL\n[Conteneur externe : SGBD]\nPersistance des cartes (table cards)\n+ stockage Docker avec volume" <<external_system>> as MySql
rectangle "Base MongoDB\n[Conteneur externe : SGBD]\nPersistance des cartes (collection cards)\n+ stockage Docker avec volume" <<external_system>> as Mongo
'rectangle "Docker / docker-compose\n[infrastructure]\nOrchestration des conteneurs\nweb + bases + volumes" <<external_system>> as Docker

' ===== Relations =====
User -[#707070]-> Spa : "Navigue et interagit (HTTP/HTTPS)"
Spa -[#707070]-> Api : "Appels API JSON (dialogues, CRUD,\ntirage, révélation de réponse)"
Api -[#707070]down-> Repo : "Utilise uniquement l'abstraction"
Repo -[#707070]-> RepoMysql : "implémente"
Repo -[#707070]-> RepoMongo : "implémente"
Api -[#707070]down-> MySql : "Tables SQL via repository\n(selectionné par config/driver)"
Api -[#707070]down-> Mongo : "Requêtes Mongo via repository\n(selectionné par config/driver)"
'Docker -[#707070]-> MySql : "Démarre / arrête (docker-compose)"
'Docker -[#707070]-> Mongo : "Démarre / arrête (docker-compose)"
@enduml