@startuml "System Komponenten"

scale 0.7
skinparam dpi 600
skinparam backgroundColor #FFAB40

skinparam componentStyle uml2
skinparam packageStyle rectangle
skinparam defaultFontSize 10

title Monorepo - System Komponenten

' ===== ROW 1: FRONTEND =====
package "apps/client (Expo React Native)" as ClientPkg #87CEEB {
    package "Screens (app/)" {
        [Login/Register] as AuthScreens
        [Calendar View] as CalendarScreen
        [Chat View] as ChatScreen
        [Event Detail] as EventDetail
        [Note Editor] as NoteScreen
    }

    package "Services" {
        [API Client] as ApiClient
        [Auth Service] as ClientAuth
        [Event Service] as ClientEvent
        [Chat Service] as ClientChat
    }

    package "Components" {
        [UI Components] as UIComponents
        [Event Cards] as EventCards
    }

    package "Stores" {
        [Auth Store] as AuthStore
        [Events Store] as EventsStore
        [Chat Store] as ChatStore
    }
}

' ===== ROW 2: SHARED (centered) =====
package "packages/shared" as SharedPkg #DDA0DD {
    [Models] as SharedModels
    [DTOs] as SharedDTOs
    [Utils] as SharedUtils
}

' ===== ROW 3: BACKEND =====
package "apps/server (Express.js)" as ServerPkg #98FB98 {
    package "Controller Layer" {
        [Routes] as Routes
        [Controllers] as Controllers
        [Middleware] as Middleware
    }

    package "Service Layer" {
        [Interfaces] as Interfaces
        [AuthService] as AuthSvc
        [ChatService] as ChatSvc
        [EventService] as EventSvc
    }

    package "AI Implementations" {
        [ClaudeAdapter] as Claude
    }

    package "Data Access Implementations" {
        [Repositories] as Repos
        [Mongoose Schemas] as Schemas
    }

    package "Utils" {
        [JWT] as JWTUtil
        [Password] as PwdUtil
        [RecurrenceExpander] as RecExpander
        [EventFormatters] as EvtFormatters
    }
}

' ===== ROW 4: EXTERNAL =====
database "MongoDB" as MongoDB
cloud "Claude API" as ClaudeAPI

' ===== CONNECTIONS =====

' Frontend: Screens -> Services
AuthScreens --> ClientAuth
CalendarScreen --> ClientEvent
ChatScreen --> ClientChat
EventDetail --> ClientEvent
NoteScreen --> ClientEvent

ClientAuth --> ApiClient
ClientEvent --> ApiClient
ClientChat --> ApiClient

ApiClient --> AuthStore
ClientEvent --> EventsStore
ClientChat --> ChatStore

' Frontend: Screens -> Components
CalendarScreen --> EventCards
ChatScreen --> EventCards
ChatScreen --> UIComponents

' Frontend -> Shared -> Backend (HTTP flow)
ApiClient --> SharedDTOs : sends
SharedDTOs --> Routes : HTTP/REST

' Shared types used by both sides
SharedModels ..> ApiClient : used by
SharedDTOs ..> Controllers : used by
SharedModels ..> Repos : used by

' Backend: Controller Layer
Routes --> Middleware
Routes --> Controllers

' Backend: Controller -> Service
Controllers --> AuthSvc
Controllers --> ChatSvc
Controllers --> EventSvc

' Backend: Service -> Interfaces
AuthSvc --> Interfaces
ChatSvc --> Interfaces
EventSvc --> Interfaces

' Backend: AI & Data Access implement Interfaces
Claude ..|> Interfaces
Repos ..|> Interfaces

' Backend: Service -> Utils
AuthSvc --> JWTUtil
AuthSvc --> PwdUtil
Middleware --> JWTUtil
EventSvc --> RecExpander
ChatSvc --> EvtFormatters

' Backend: Data Access
Repos --> Schemas

' Backend -> External
Schemas --> MongoDB
Claude --> ClaudeAPI

@enduml