@startuml "System Komponenten"

skinparam componentStyle uml2
skinparam packageStyle rectangle
skinparam defaultFontSize 10

top to bottom direction

title Monorepo - System Komponenten

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

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

    package "Components" {
        [EventCard] as EventCard
        [ChatBubble] as ChatBubble
        [ConfirmDialog] as ConfirmDialog
    }

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

' ===== SHARED =====
package "packages/shared" #DDA0DD {
    [Models] as SharedModels
    [DTOs] as SharedDTOs
}

' ===== BACKEND =====
package "apps/server (Express.js)" #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 Layer" {
        [ClaudeAdapter] as Claude
    }

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

    package "Utils" {
        [JWT] as JWTUtil
        [Password] as PwdUtil
    }
}

' ===== EXTERNAL =====
database "MongoDB" as MongoDB
cloud "Claude API" as ClaudeAPI

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

' Frontend internal
AuthScreens --> ClientAuth
CalendarScreen --> ClientEvent
ChatScreen --> ClientChat
EventDetail --> ClientEvent

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

ApiClient --> AuthStore
ClientEvent --> EventsStore

' Frontend -> Shared
ApiClient ..> SharedDTOs
ApiClient ..> SharedModels

' Frontend -> Backend
ApiClient --> Routes : HTTP/REST

' 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

' Backend: Data Access
Repos --> Schemas

' Backend -> Shared
Repos ..> SharedModels
Controllers ..> SharedDTOs

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

@enduml