# Frontend Erklärung (für Einsteiger)

Dieses Dokument erklärt die Logik und Struktur des Frontends. Es basiert auf **Next.js** (einem React Framework) und **TypeScript**.

## 1. Grundkonzept: Komponenten
Die gesamte Anwendung besteht aus kleinen, wiederverwendbaren Bausteinen, sogenannten **Komponenten**.
Stell dir das wie Lego vor: Ein "Knopf" ist ein Stein, ein "Formular" ist eine kleine Platte aus Steinen, und die "Seite" ist das fertige Haus.

**Warum?**
-   Übersichtlichkeit: Man muss nicht 1000 Zeilen Code auf einmal verstehen, sondern nur kleine Teile.
-   Wiederverwendbarkeit: Ein Knopf wird einmal programmiert und überall benutzt.

## 2. Der Startpunkt: `layout.tsx` und `page.tsx`

### `app/layout.tsx` (Der Rahmen)
Dies ist die "Hülle" um jede Seite.
-   Hier wird HTML, Body und CSS geladen.
-   **Wichtig:** Hier sitzt der `NextAuthSessionProvider`. Das ist wie ein unsichtbarer "Rucksack", der die Login-Informationen (Session) trägt und sie überall in der App verfügbar macht.

### `app/page.tsx` (Der Inhalt)
Dies ist die Startseite. Sie entscheidet, was angezeigt wird:
1.  **Nicht eingeloggt?** -> Zeige den Login-Screen (`AuthScreen`).
2.  **Eingeloggt als Lehrer?** -> Zeige das Lehrer-Dashboard.
3.  **Eingeloggt als Raumbetreuer?** -> Zeige das Betreuer-Dashboard.

**Warum?**
So haben wir eine einzige URL (Startseite), die sich aber intelligent an den Nutzer anpasst ("Conditional Rendering").

## 3. Das Gehirn der App: `lib/auth-context.tsx`

Hier liegt die wichtigste Logik. Wir nutzen einen **React Context**.
Normalerweise müsstest du Daten (z.B. "Wer ist eingeloggt?") von oben nach unten durch alle Komponenten durchreichen ("Prop Drilling"). Das ist mühsam.
Der Context ist wie ein **globaler Speicher**, auf den jede Komponente direkt zugreifen kann.

**Was passiert hier?**
-   **Zustand (State)**: Hier merken wir uns:
    -   `user`: Wer ist gerade da?
    -   `tickets`: Liste aller Tickets.
    -   `rooms`: Liste aller Räume.
-   **Aktionen**: Hier liegen die Funktionen wie `login()`, `createTicket()`, `updateTicketStatus()`.
    -   Diese Funktionen sprechen mit dem Backend (dem Server) über `fetch`.

**Beispiel:**
Wenn du auf "Ticket erstellen" klickst, ruft die Komponente `createTicket()` im Context auf. Der Context sendet die Daten an den Server und lädt danach die Ticketliste neu (`fetchTickets`). Alle Komponenten, die die Ticketliste anzeigen, aktualisieren sich dann automatisch.

## 4. Die Verbindung zum Backend: Authentifizierung

Wir nutzen **NextAuth.js**.
-   **Frontend**: Wenn du dich einloggst, schicken wir Benutzername/Passwort an NextAuth.
-   **Backend (Java)**: Unser Backend prüft die Daten und gibt einen "Token" (Ausweis) zurück.
-   **Session**: NextAuth speichert diesen "Ausweis" sicher. Bei jeder Anfrage an den Server (z.B. "Lade Tickets") zeigen wir diesen Ausweis vor (`Authorization` Header).

## 5. Warum TypeScript?

TypeScript ist JavaScript mit "Typen".
Statt einfach eine Variable `data` zu haben (wo alles drin sein könnte: Text, Zahl, oder nichts), definieren wir genau:
`interface Ticket { id: number; title: string; status: 'OPEN' | 'CLOSED'; }`

**Warum?**
-   **Fehlerschutz**: Wenn du versuchst, einem Ticket einen Namen statt einer ID zu geben, unterstreicht TypeScript das rot – *bevor* du das Programm überhaupt startest.
-   **Autovervollständigung**: Der Code-Editor weiß genau, welche Eigenschaften ein Ticket hat und schlägt sie dir vor. Das macht das Programmieren viel schneller und sicherer.

## Zusammenfassung
1.  Der Nutzer öffnet die Seite (`page.tsx`).
2.  Der `AuthContext` prüft: "Kenne ich dich?".
3.  Nein? -> Login Formular.
4.  Ja? -> Dashboard anzeigen.
5.  Das Dashboard holt sich Daten (Tickets) aus dem `AuthContext`.
6.  Der `AuthContext` hat die Daten vorher vom Server geladen.