sequenceDiagram
    participant User as 👤 User
    participant UI as 🖥️ AuthForm
    participant Hook as 🪝 useAuth
    participant API as 📡 api.ts
    participant Server as 🖧 Backend
    participant DB as 💾 SQLite

    User->>UI: Füllt Formular aus
    UI->>Hook: signup(username, password)
    Hook->>Hook: setLoading(true)
    Hook->>API: authApi.signup()
    API->>Server: POST /api/signup
    
    Note over Server: Rate Limit Check (5/min)
    
    Server->>Server: validateAuth()
    
    alt Validierung fehlgeschlagen
        Server-->>API: 400 { error }
        API-->>Hook: { error }
        Hook-->>UI: setError(message)
        UI-->>User: ❌ Zeigt Fehler
    end
    
    Server->>Server: Bun.password.hash()
    Server->>DB: INSERT INTO users
    
    alt Username existiert
        DB-->>Server: UNIQUE constraint error
        Server-->>API: 400 "User already exists"
        API-->>Hook: { error }
        Hook-->>UI: setError()
        UI-->>User: ❌ Zeigt Fehler
    end
    
    DB-->>Server: ✓ User erstellt
    Server-->>API: 200 { success: true }
    API-->>Hook: { success }
    Hook-->>UI: setError("Erfolgreich!")
    UI-->>User: ✅ Wechselt zu Login

sequenceDiagram
    participant User as 👤 User
    participant UI as 🖥️ AuthForm
    participant Hook as 🪝 useAuth
    participant API as 📡 api.ts
    participant Server as 🖧 Backend
    participant DB as 💾 SQLite
    participant Storage as 💾 LocalStorage

    User->>UI: Gibt Credentials ein
    UI->>Hook: login(username, password)
    Hook->>API: authApi.login()
    API->>Server: POST /api/login
    
    Note over Server: Rate Limit Check (10/min)
    
    Server->>Server: validateAuth()
    Server->>DB: SELECT * FROM users WHERE username = ?
    
    alt User nicht gefunden
        DB-->>Server: null
        Server-->>API: 401 "Invalid credentials"
        API-->>Hook: { error, status: 401 }
        Hook-->>UI: setError()
        UI-->>User: ❌ Zeigt Fehler
    end
    
    DB-->>Server: User { id, password_hash }
    Server->>Server: Bun.password.verify()
    
    alt Passwort falsch
        Server-->>API: 401 "Invalid credentials"
        API-->>Hook: { error }
        Hook-->>UI: setError()
        UI-->>User: ❌ Zeigt Fehler
    end
    
    Server->>Server: jwt.sign({ id, username }, secret)
    Server-->>API: 200 { token }
    API-->>Hook: { data: { token } }
    Hook->>Storage: tokenStorage.set(token)
    Hook->>Hook: setToken(token)
    Hook-->>UI: isAuthenticated = true
    UI-->>User: ✅ Zeigt Dashboard

sequenceDiagram
    participant User as 👤 User
    participant UI as 🖥️ Button
    participant Hook as 🪝 useAuth
    participant Storage as 💾 LocalStorage
    participant Entries as 🪝 useEntries

    User->>UI: Klickt "Logout"
    UI->>Hook: logout()
    Hook->>Storage: tokenStorage.remove()
    Storage-->>Hook: ✓ Token gelöscht
    Hook->>Hook: setToken('')
    
    Note over Hook,Entries: Token ist leer →<br/>isAuthenticated = false
    
    Hook-->>UI: State Update
    UI-->>User: 🔄 Zeigt Login-Formular
    
    Note over User,Storage: Kein Server-Request nötig!<br/>JWT ist stateless - Token<br/>wird einfach verworfen.

sequenceDiagram
    participant User as 👤 User
    participant Form as 🖥️ EntryForm
    participant Hook as 🪝 useEntries
    participant API as 📡 api.ts
    participant Server as 🖧 Backend
    participant JWT as 🔐 JWT Middleware
    participant DB as 💾 SQLite

    User->>Form: Gibt Text ein, klickt "Senden"
    Form->>Form: Validiert (nicht leer)
    Form->>Hook: addEntry(text)
    Hook->>API: entriesApi.create(token, text)
    API->>Server: POST /api/entries<br/>Header: Authorization: Bearer {token}
    
    Server->>JWT: jwt({ secret, alg: 'HS256' })
    
    alt Token ungültig/abgelaufen
        JWT-->>Server: 401 Unauthorized
        Server-->>API: 401
        API-->>Hook: { status: 401 }
        Hook->>Hook: onUnauthorized() → logout()
        Hook-->>Form: Redirect zu Login
    end
    
    JWT-->>Server: payload { id, username }
    Server->>Server: validateEntryText(text)
    
    alt Text ungültig
        Server-->>API: 400 { error }
        API-->>Hook: { error }
        Hook-->>Form: setError()
        Form-->>User: ❌ Zeigt Fehler
    end
    
    Server->>DB: INSERT INTO entries (text, userId)
    DB-->>Server: ✓ Entry erstellt
    Server-->>API: 200 { success: true }
    API-->>Hook: { success }
    Hook->>Hook: fetchEntries() → Refresh
    Hook-->>Form: ✓ Success
    Form->>Form: setInputText('')
    Form-->>User: ✅ Neuer Eintrag sichtbar

sequenceDiagram
    participant Browser as 🌐 Browser
    participant App as 🖥️ App.tsx
    participant Auth as 🪝 useAuth
    participant Entries as 🪝 useEntries
    participant Storage as 💾 LocalStorage
    participant API as 📡 api.ts
    participant Server as 🖧 Backend

    Browser->>App: Lädt Seite
    App->>Auth: useAuth()
    Auth->>Storage: tokenStorage.get()
    
    alt Kein Token
        Storage-->>Auth: null
        Auth-->>App: isAuthenticated = false
        App-->>Browser: 🔐 Zeigt Login
    end
    
    Storage-->>Auth: token
    Auth->>Auth: setToken(token)
    Auth-->>App: isAuthenticated = true
    
    App->>Entries: useEntries(token, logout)
    
    Note over Entries: useEffect() bei<br/>Token-Änderung
    
    Entries->>API: entriesApi.getAll(token)
    API->>Server: GET /api/entries
    Server->>Server: JWT validieren
    Server->>Server: DB Query für userId
    Server-->>API: 200 [ entries... ]
    API-->>Entries: { data: entries }
    Entries->>Entries: setEntries(data)
    Entries-->>App: entries = [...]
    App-->>Browser: 📋 Zeigt Einträge

graph TB
    subgraph "🖥️ Frontend - React SPA"
        UI["📦 Components<br/>(Button, Card, AuthForm...)"]
        Hooks["🪝 Custom Hooks<br/>(useAuth, useEntries, useFiles)"]
        APIClient["📡 api.ts<br/>(Fetch Wrapper)"]
        Storage["💾 storage.ts<br/>(LocalStorage)"]
    end
    
    subgraph "🖧 Backend - Hono + Bun"
        Routes["🛤️ Routes<br/>(auth, entries, files, health)"]
        MW["🛡️ Middleware<br/>(JWT, RateLimit, SecureHeaders)"]
        Val["✅ Validation<br/>(Zod Schemas)"]
        Repo["📚 Repositories"]
        DB[("💾 SQLite")]
        FS[("📁 Filesystem<br/>/data/uploads")]
    end
    
    subgraph "📧 External Services"
        Resend["📨 Resend API<br/>(E-Mail Versand)"]
    end
    
    UI --> Hooks
    Hooks --> APIClient
    Hooks --> Storage
    APIClient -->|"HTTP/JSON"| Routes
    Routes --> MW
    Routes --> Val
    Routes --> Repo
    Routes -->|"Password Reset"| Resend
    Repo --> DB
    Routes -->|"File Storage"| FS
    
    style UI fill:#61dafb,color:#000
    style Hooks fill:#61dafb,color:#000
    style APIClient fill:#61dafb,color:#000
    style Storage fill:#61dafb,color:#000
    style Routes fill:#ff6b6b,color:#000
    style MW fill:#ff6b6b,color:#000
    style Val fill:#ff6b6b,color:#000
    style Repo fill:#ff6b6b,color:#000
    style DB fill:#ffd93d,color:#000
    style FS fill:#ffd93d,color:#000
    style Resend fill:#9333ea,color:#fff

sequenceDiagram
    participant User as 👤 User
    participant UI as 🖥️ FileUpload
    participant Hook as 🪝 useFiles
    participant API as 📡 api.ts
    participant Server as 🖧 Backend
    participant FS as 📁 Filesystem
    participant DB as 💾 SQLite

    User->>UI: Wählt Datei aus / Drag & Drop
    UI->>UI: Validiert Dateityp & Größe
    
    alt Validierung fehlgeschlagen
        UI-->>User: ❌ Zeigt Fehler (Typ/Größe)
    end
    
    UI->>Hook: uploadFile(file, description?)
    Hook->>Hook: setLoading(true)
    Hook->>API: filesApi.upload(token, file)
    
    Note over API: multipart/form-data
    
    API->>Server: POST /api/files
    Server->>Server: JWT validieren
    
    alt Token ungültig
        Server-->>API: 401 Unauthorized
        API-->>Hook: { status: 401 }
        Hook->>Hook: onUnauthorized()
        Hook-->>UI: Redirect zu Login
    end
    
    Server->>Server: MIME-Type prüfen
    Server->>Server: Dateigröße prüfen (max 5MB)
    
    alt Validierung fehlgeschlagen
        Server-->>API: 400 { error }
        API-->>Hook: { error }
        Hook-->>UI: setError()
        UI-->>User: ❌ Zeigt Fehler
    end
    
    Server->>Server: crypto.randomUUID()
    Server->>FS: mkdir /data/uploads/{userId}
    Server->>FS: Bun.write({uuid}.ext)
    Server->>DB: INSERT INTO files (metadata)
    DB-->>Server: ✓ FileMetadata
    Server-->>API: 200 { success, file }
    API-->>Hook: { data }
    Hook->>Hook: fetchFiles() → Refresh
    Hook-->>UI: ✓ Success
    UI-->>User: ✅ Datei in Liste sichtbar

sequenceDiagram
    participant User as 👤 User
    participant UI as 🖥️ ForgotPasswordForm
    participant API as 📡 api.ts
    participant Server as 🖧 Backend
    participant DB as 💾 SQLite
    participant Resend as 📨 Resend API
    participant Email as 📧 E-Mail Client

    Note over User,Email: Phase 1: Passwort-Reset anfordern

    User->>UI: Gibt E-Mail ein
    UI->>API: authApi.forgotPassword(email)
    API->>Server: POST /api/forgot-password
    
    Note over Server: Rate Limit Check (3/min)
    
    Server->>Server: Zod-Validierung
    Server->>DB: SELECT * FROM users WHERE email = ?
    
    alt E-Mail nicht gefunden
        DB-->>Server: null
        Server-->>API: 200 { success, message }
        Note over Server: Keine Info preisgeben!
        API-->>UI: "Falls Konto existiert..."
        UI-->>User: ✅ Generische Erfolgsmeldung
    end
    
    DB-->>Server: User { id, username }
    Server->>Server: crypto.randomUUID()
    Server->>Server: expires = now + 1h
    Server->>DB: UPDATE users SET reset_token, reset_expires
    
    Server->>Server: generateResetEmail(url, username)
    Server->>Resend: POST /emails (HTML)
    Resend-->>Server: 200 OK
    
    Server-->>API: 200 { success, message }
    API-->>UI: "Falls Konto existiert..."
    UI-->>User: ✅ Generische Erfolgsmeldung
    
    Note over Resend,Email: E-Mail Zustellung
    Resend->>Email: Reset-Link E-Mail
    
    Note over User,Email: Phase 2: Passwort zurücksetzen

    Email->>User: Öffnet E-Mail
    User->>UI: Klickt Reset-Link
    
    Note over UI: ResetPasswordForm
    
    UI->>API: authApi.validateResetToken(token)
    API->>Server: GET /api/reset-password/{token}
    Server->>DB: SELECT * FROM users WHERE reset_token = ?
    
    alt Token ungültig/abgelaufen
        Server-->>API: 400 { valid: false }
        API-->>UI: { valid: false }
        UI-->>User: ❌ "Link abgelaufen"
    end
    
    Server-->>API: 200 { valid: true }
    API-->>UI: Token gültig
    UI-->>User: Zeigt Passwort-Formular
    
    User->>UI: Gibt neues Passwort ein
    UI->>API: authApi.resetPassword(token, password)
    API->>Server: POST /api/reset-password
    
    Server->>DB: SELECT * FROM users WHERE reset_token = ?
    Server->>Server: Prüfe reset_expires
    Server->>Server: Bun.password.hash(newPassword)
    Server->>DB: UPDATE users SET password = ?
    Server->>DB: UPDATE users SET reset_token = NULL
    
    Server-->>API: 200 { success, message }
    API-->>UI: "Passwort zurückgesetzt!"
    UI-->>User: ✅ Zum Login-Button