import React, { useEffect } from "react";
import { Container, Row, Col, Card, Badge, Table, Button, Form, Nav } from "react-bootstrap";
import mermaid from "mermaid";

const Wireframe = ({ title, children }) => (
    <Col md={6} lg={4} className="mb-4">
        <Card className="h-100 shadow-sm">
            <Card.Header as="h5" className="text-center bg-light">{title}</Card.Header>
            <Card.Body className="d-flex justify-content-center align-items-center p-2">
                <div className="bg-white w-100 h-100 border rounded-3 shadow-inner p-3 d-flex flex-column" style={{ aspectRatio: '9 / 19.5' }}>
                    {children}
                </div>
            </Card.Body>
        </Card>
    </Col>
);


function KrimiDinner() {
    useEffect(() => {
        mermaid.initialize({ startOnLoad: false, theme: 'neutral' });
        try {
            mermaid.run();
        } catch (e) {
            console.error("Mermaid run error:", e);
        }
    }, []);

  return (
    <div className="project-page">
      <Container>
        <header className="text-center border-bottom pb-4 mb-5">
          <h1 className="project-title">Projekt-Blaupause: KI-Krimi-Dinner "Projekt Chimera"</h1>
          <div className="mt-4 d-flex justify-content-center flex-wrap">
            <div className="project-meta-item mx-2">
              <Badge bg="secondary" className="text-uppercase">Version</Badge>
              <span className="meta-value ms-2">3.0 (Complete UI)</span>
            </div>
            <div className="project-meta-item mx-2">
              <Badge bg="secondary" className="text-uppercase">Autor</Badge>
              <span className="meta-value ms-2">D. Schuhbaum & S. Altschäffl</span>
            </div>
            <div className="project-meta-item mx-2">
              <Badge bg="secondary" className="text-uppercase">Datum</Badge>
              <span className="meta-value ms-2">03.10.2025</span>
            </div>
          </div>
        </header>

        <section className="mb-5">
          <h2>1. Projektübersicht</h2>
          <p>
            "Projekt Chimera" ist ein hybrides Krimi-Dinner-Erlebnis, das
            physische soziale Interaktion mit einer digitalen App-Komponente
            verbindet. Das Alleinstellungsmerkmal ist der Einsatz einer
            zweistufigen KI-Architektur, die nicht nur einzigartige narrative
            Szenarien generiert, sondern diese auch proaktiv auf logische
            Konsistenz validiert und korrigiert.
          </p>
          <p>
            Die Architektur basiert auf einer klaren Trennung:{" "}
            <strong>Supabase</strong> dient als dedizierter Service für die
            Benutzerauthentifizierung, während alle Spieldaten (Szenarien,
            Spieler, Spielstände) in einer{" "}
            <strong>separaten, dedizierten PostgreSQL-Datenbank</strong>{" "}
            gehostet werden. Ein zentrales <strong>FastAPI-Backend</strong>{" "}
            fungiert als sichere Schnittstelle zwischen den Clients und
            beiden Diensten.
          </p>
        </section>

        <section className="mb-5">
          <h2>2. Narratives Design & Validierung</h2>
          <p>
            Die Generierung jedes Spiels folgt einem strengen, zweistufigen
            Prozess, um die narrative Qualität und logische Integrität zu
            gewährleisten.
          </p>
          <Row className="mt-4">
            <Col md={6}>
              <Card className="h-100">
                <Card.Body>
                  <Card.Title as="h3">Schritt 1: Kreative Generierung (Der "Autor")</Card.Title>
                  <ul>
                    <li>Hintergrundgeschichte</li>
                    <li>Charaktere</li>
                    <li>Geheimnisse & Ziele</li>
                    <li>Der Mord & lückenloser Zeitstrahl</li>
                    <li>Beziehungsgeflecht</li>
                    <li>Hinweise</li>
                  </ul>
                </Card.Body>
              </Card>
            </Col>
            <Col md={6}>
              <Card className="h-100">
                <Card.Body>
                  <Card.Title as="h3">Schritt 2: Logische Validierung & Korrektur (Der "Logik-Lektor")</Card.Title>
                  <ul>
                    <li>Widersprüche in Zeitlinien</li>
                    <li>Motiv-Konsistenz</li>
                    <li>Hinweis-Validität</li>
                    <li>Charakter-Konsistenz</li>
                    <li>Regelkonformität</li>
                  </ul>
                </Card.Body>
              </Card>
            </Col>
          </Row>
        </section>

        <section className="mb-5">
          <h2>3. Technische Architektur</h2>
          <p>
            Die Architektur ist auf maximale Kontrolle und Skalierbarkeit ausgelegt. Die React Native-Clients kommunizieren ausschließlich mit dem FastAPI-Backend. Echtzeit-Updates werden über eine WebSocket-Verbindung gepusht.
          </p>
          <div className="text-center bg-light p-3 rounded">
            <pre className="mermaid">
              {`
                graph TD
                    subgraph "Spieler-Geräte"
                        P1["React Native Apps"]
                    end

                    subgraph "Authentifizierung"
                        Auth["Supabase Auth"]
                    end

                    subgraph "Sicheres Backend"
                        FastAPI["FastAPI Server <br> REST & WebSockets"]
                    end

                    subgraph "Spieldaten-Bank"
                        PG_DB["PostgreSQL DB"]
                    end

                    subgraph "Externe Dienste"
                        OAI["OpenAI API"]
                    end

                    %% Verbindungen
                    P1 -- "1. Login" --> Auth
                    P1 -- "2. API Calls (mit Token)" --> FastAPI

                    FastAPI -- "3. KI Call" --> OAI
                    FastAPI -- "4. DB-Zugriff" --> PG_DB

                    FastAPI -- "5. WebSocket Updates" --> P1
              `}
            </pre>
          </div>
          <h3 className="mt-4">Datenfluss-Beschreibung:</h3>
          <ol>
            <li><strong>Authentifizierung:</strong> Benutzer authentifiziert sich bei Supabase Auth und erhält ein JWT.</li>
            <li><strong>API-Anfragen:</strong> Die App sendet Anfragen mit dem JWT an den FastAPI-Server.</li>
            <li><strong>KI-Generierung:</strong> FastAPI ruft die OpenAI-API für die Spielerstellung auf.</li>
            <li><strong>Datenbank-Interaktion:</strong> FastAPI ist die einzige Komponente, die mit der PostgreSQL-DB kommuniziert.</li>
            <li><strong>Echtzeit-Updates:</strong> Clients bauen eine WebSocket-Verbindung zum FastAPI-Server auf.</li>
          </ol>
        </section>

        <section className="mb-5">
            <h2>4. User Interface (UI) Konzept</h2>
            <p>Die UI-Konzepte werden als klare, moderne Wireframes visualisiert, um den gesamten App-Flow darzustellen.</p>
            <Row>
                <Wireframe title="1. Login">
                    <div className="text-center pt-4 pb-3">
                        <h4 className="fw-bold fs-5">PROJEKT CHIMERA</h4>
                    </div>
                    <div className="px-3 flex-grow-1 d-flex flex-column">
                        <Form.Control type="text" placeholder="E-Mail-Adresse" className="mb-2" />
                        <Form.Control type="password" placeholder="Passwort" className="mb-3" />
                        <Button variant="primary" className="w-100 fw-semibold">Anmelden</Button>
                        <p className="text-center small text-muted mt-2">Noch kein Konto? <a href="#">Jetzt registrieren</a></p>
                    </div>
                </Wireframe>
                <Wireframe title="2. Registrierung">
                    <div className="text-center pt-4 pb-3">
                        <h4 className="fw-bold fs-5">Konto erstellen</h4>
                    </div>
                    <div className="px-3 flex-grow-1 d-flex flex-column">
                        <Form.Control type="text" placeholder="E-Mail-Adresse" className="mb-2" />
                        <Form.Control type="password" placeholder="Passwort" className="mb-2" />
                        <Form.Control type="password" placeholder="Passwort bestätigen" className="mb-3" />
                        <Button variant="primary" className="w-100 fw-semibold">Registrieren</Button>
                        <p className="text-center small text-muted mt-2">Bereits ein Konto? <a href="#">Zum Login</a></p>
                    </div>
                </Wireframe>
                <Wireframe title="3. Home Dashboard">
                    <div className="p-2 d-flex justify-content-between align-items-center border-bottom">
                        <h4 className="fw-bold fs-6 mb-0">Deine Spiele</h4>
                        <Button variant="link" size="sm">Logout</Button>
                    </div>
                    <div className="p-2 flex-grow-1 overflow-auto">
                        <Card className="mb-2">
                            <Card.Body className="p-2">
                                <p className="fw-bold mb-1">Tech-Konferenz 2035</p>
                                <p className="small text-muted mb-2">Status: <span className="fw-semibold text-success">Aktiv (Runde 2/3)</span></p>
                                <Button variant="primary" size="sm" className="w-100">Weiterspielen</Button>
                            </Card.Body>
                        </Card>
                        <Card>
                            <Card.Body className="p-2">
                                <p className="fw-bold mb-1">Villa Vendetta</p>
                                <p className="small text-muted mb-2">Status: <span className="fw-semibold text-secondary">Lobby (0 Spieler)</span></p>
                                <Button variant="primary" size="sm" className="w-100">Zur Lobby</Button>
                            </Card.Body>
                        </Card>
                    </div>
                    <div className="p-2 border-top">
                        <Row>
                            <Col><Button variant="success" className="w-100">Neues Spiel</Button></Col>
                            <Col><Button variant="secondary" className="w-100">Beitreten</Button></Col>
                        </Row>
                    </div>
                </Wireframe>
                <Wireframe title="4. Spiel erstellen (Host)">
                    <div className="text-center pt-3 pb-2 border-bottom">
                        <h4 className="fw-bold fs-6">Neues Spiel erstellen</h4>
                    </div>
                    <div className="px-3 py-3 flex-grow-1">
                        <Form.Label className="fw-semibold small">Szenario-Beschreibung</Form.Label>
                        <Form.Control as="textarea" placeholder="z.B. Ein Mord auf einer Tech-Konferenz im Jahr 2035..." rows={3} className="small mb-3" />
                        <Form.Label className="fw-semibold small">Rundenanzahl</Form.Label>
                        <div className="d-flex align-items-center">
                            <Form.Range min="2" max="5" defaultValue="3" className="w-100" />
                            <span className="fw-bold fs-5 ms-3">3</span>
                        </div>
                        <p className="text-muted small mt-3">Die Spieleranzahl ist flexibel (mind. 3 Spieler) und wird in der Lobby bestimmt.</p>
                    </div>
                    <div className="px-3 pb-3">
                        <Button variant="primary" className="w-100 fw-semibold">Szenario generieren & Lobby öffnen</Button>
                    </div>
                </Wireframe>
                <Wireframe title="5. Spiel beitreten (Spieler)">
                    <div className="text-center pt-4 pb-3">
                        <h4 className="fw-bold fs-5">Spiel beitreten</h4>
                    </div>
                    <div className="px-3 flex-grow-1 d-flex flex-column justify-content-center">
                        <Form.Label htmlFor="game-code-input" className="fw-semibold small text-center">Gib den Spiel-Code ein</Form.Label>
                        <Form.Control id="game-code-input" type="text" placeholder="ABC-123" className="mb-3 text-center fs-4" style={{letterSpacing: '0.2rem'}} />
                        <Button variant="primary" className="w-100 fw-semibold">Lobby beitreten</Button>
                    </div>
                </Wireframe>
                <Wireframe title="6. Host-Lobby">
                    <div className="text-center pt-3 pb-2 border-bottom">
                        <p className="small text-muted mb-0">Spiel-Lobby</p>
                        <h4 className="fw-bold fs-6">Tech-Konferenz 2035</h4>
                    </div>
                    <div className="px-3 py-3 text-center flex-grow-1">
                        <p className="small text-muted">Teile diesen Code mit deinen Mitspielern:</p>
                        <div className="my-2 p-3 border border-2 border-dashed rounded-3 text-primary">
                            <span className="fw-bold fs-3" style={{letterSpacing: '0.2rem'}}>GHY-781</span>
                        </div>
                        <h5 className="fw-semibold text-start small mt-3 mb-2">Beigetretene Spieler (3)</h5>
                        <ul className="list-group text-start">
                            <li className="list-group-item d-flex justify-content-between align-items-center p-2">Maria <Button variant="outline-danger" size="sm">X</Button></li>
                            <li className="list-group-item d-flex justify-content-between align-items-center p-2">Jonas <Button variant="outline-danger" size="sm">X</Button></li>
                            <li className="list-group-item d-flex justify-content-between align-items-center p-2">Sandra <Button variant="outline-danger" size="sm">X</Button></li>
                        </ul>
                    </div>
                    <div className="px-3 pb-3">
                        <Button variant="outline-danger" className="w-100 mb-2 btn-sm">Szenario verwerfen & Neu generieren</Button>
                        <Button variant="success" className="w-100 fw-semibold">Spiel starten (3 Spieler)</Button>
                    </div>
                </Wireframe>
                <Wireframe title="7. Spieler-Ansicht (Rolle)">
                    <div className="p-2 text-center border-bottom">
                        <p className="small text-muted mb-0">Deine Rolle</p>
                        <h4 className="fw-bold fs-6">Dr. Aris Thorne</h4>
                    </div>
                    <Nav variant="tabs" defaultActiveKey="#rolle" justify>
                        <Nav.Item><Nav.Link href="#rolle" className="pb-1 pt-2 small">Rolle</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link href="#hinweise" className="pb-1 pt-2 small text-muted">Hinweise</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link href="#charaktere" className="pb-1 pt-2 small text-muted">Charaktere</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link href="#zeitstrahl" className="pb-1 pt-2 small text-muted">Zeitstrahl</Nav.Link></Nav.Item>
                    </Nav>
                    <div className="p-3 flex-grow-1 overflow-auto small">
                        <h5 className="fw-bold small">Deine Ziele:</h5>
                        <ul className="list-unstyled small ps-3">
                            <li>- Finde heraus, wer deine Forschung sabotiert hat.</li>
                            <li>- Verhindere, dass dein Geheimnis ans Licht kommt.</li>
                        </ul>
                        <h5 className="fw-bold small pt-2">Deine Geheimnisse:</h5>
                        <p className="small">Du hast vor einem Monat bei einem nicht genehmigten Experiment die Stromversorgung der Station überlastet, was zu einem kritischen Ausfall führte. Nur das Opfer wusste davon.</p>
                    </div>
                </Wireframe>
                <Wireframe title="8. Spieler-Ansicht (Hinweise)">
                     <div className="p-2 text-center border-bottom">
                        <p className="small text-muted mb-0">Deine Rolle</p>
                        <h4 className="fw-bold fs-6">Dr. Aris Thorne</h4>
                    </div>
                    <Nav variant="tabs" defaultActiveKey="#hinweise" justify>
                        <Nav.Item><Nav.Link href="#rolle" className="pb-1 pt-2 small text-muted">Rolle</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link href="#hinweise" className="pb-1 pt-2 small position-relative">Hinweise<Badge pill bg="danger" className="position-absolute top-0 start-100 translate-middle" style={{fontSize: '0.5rem'}}>&nbsp;</Badge></Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link href="#charaktere" className="pb-1 pt-2 small text-muted">Charaktere</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link href="#zeitstrahl" className="pb-1 pt-2 small text-muted">Zeitstrahl</Nav.Link></Nav.Item>
                    </Nav>
                    <div className="p-3 flex-grow-1 overflow-auto small space-y-4">
                        <div>
                            <h5 className="fw-bold">Runde 2 (18:00 - 19:00 Uhr)</h5>
                            <div className="alert alert-warning p-2">
                                <p className="fw-semibold small text-warning-emphasis mb-0">HINWEIS #3</p>
                                <p className="small text-warning-emphasis mt-1">Ein zerrissener Brief wurde gefunden. Die Worte "Schulden" und "letzte Warnung" sind lesbar.</p>
                            </div>
                        </div>
                        <div className="opacity-75">
                            <h5 className="fw-bold">Runde 1 (16:00 - 18:00 Uhr)</h5>
                            <div className="alert alert-secondary p-2">
                                <p className="fw-semibold small mb-0">HINWEIS #1</p>
                                <p className="small mt-1">Das Opfer wurde mit einem schweren Gegenstand erschlagen.</p>
                            </div>
                        </div>
                    </div>
                </Wireframe>
                <Wireframe title="9. Spieler-Ansicht (Charaktere)">
                    <div className="p-2 text-center border-bottom">
                        <p className="small text-muted mb-0">Deine Rolle</p>
                        <h4 className="fw-bold fs-6">Dr. Aris Thorne</h4>
                    </div>
                    <Nav variant="tabs" defaultActiveKey="#charaktere" justify>
                        <Nav.Item><Nav.Link href="#rolle" className="pb-1 pt-2 small text-muted">Rolle</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link href="#hinweise" className="pb-1 pt-2 small text-muted">Hinweise</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link href="#charaktere" className="pb-1 pt-2 small">Charaktere</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link href="#zeitstrahl" className="pb-1 pt-2 small text-muted">Zeitstrahl</Nav.Link></Nav.Item>
                    </Nav>
                    <div className="p-3 flex-grow-1 overflow-auto small">
                        <div className="list-group">
                            <div className="list-group-item list-group-item-action p-2">
                                <p className="fw-bold mb-0">Evelyn Reed</p>
                                <p className="small text-muted mb-0">Investorin</p>
                            </div>
                            <div className="list-group-item list-group-item-action p-2">
                                <p className="fw-bold mb-0">Ivan Petrov</p>
                                <p className="small text-muted mb-0">Sicherheitschef</p>
                            </div>
                        </div>
                    </div>
                </Wireframe>
                <Wireframe title="10. Spieler-Ansicht (Zeitstrahl)">
                    <div className="p-2 text-center border-bottom">
                        <p className="small text-muted mb-0">Deine Rolle</p>
                        <h4 className="fw-bold fs-6">Dr. Aris Thorne</h4>
                    </div>
                    <Nav variant="tabs" defaultActiveKey="#zeitstrahl" justify>
                        <Nav.Item><Nav.Link href="#rolle" className="pb-1 pt-2 small text-muted">Rolle</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link href="#hinweise" className="pb-1 pt-2 small text-muted">Hinweise</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link href="#charaktere" className="pb-1 pt-2 small text-muted">Charaktere</Nav.Link></Nav.Item>
                        <Nav.Item><Nav.Link href="#zeitstrahl" className="pb-1 pt-2 small">Zeitstrahl</Nav.Link></Nav.Item>
                    </Nav>
                    <div className="p-3 flex-grow-1 overflow-auto small">
                        <ul className="list-unstyled">
                            <li className="mb-3">
                                <p className="fw-bold mb-0">16:00 Uhr</p>
                                <p className="small text-muted">Beginn der Konferenz-Keynote.</p>
                            </li>
                            <li className="mb-3">
                                <p className="fw-bold mb-0">17:15 Uhr</p>
                                <p className="small text-muted">Opfer verlässt den Saal für ein Telefonat.</p>
                            </li>
                            <li className="mb-3">
                                <p className="fw-bold mb-0 text-danger">17:30 Uhr - Mordzeitpunkt</p>
                                <p className="small text-muted">Stromausfall im Westflügel.</p>
                            </li>
                            <li className="mb-3">
                                <p className="fw-bold mb-0">17:45 Uhr</p>
                                <p className="small text-muted">Leiche wird im Serverraum gefunden.</p>
                            </li>
                        </ul>
                    </div>
                </Wireframe>
                <Wireframe title="11. Abstimmung">
                    <div className="text-center pt-3 pb-2 border-bottom">
                        <p className="small text-muted mb-0">Runde 3/3</p>
                        <h4 className="fw-bold fs-6">Wer ist der Mörder?</h4>
                    </div>
                    <div className="px-3 py-3 flex-grow-1 overflow-auto">
                        <p className="small text-center text-muted">Wähle den Spieler aus, den du für den Täter hältst.</p>
                        <div className="d-grid gap-2 mt-3">
                            <Button variant="outline-secondary" className="p-3 text-start" disabled>
                                <span className="fw-bold">Dr. Aris Thorne (Du)</span><br/>
                                <span className="small text-muted">KI-Ethiker</span>
                            </Button>
                            <Button variant="outline-secondary" className="p-3 text-start">
                                <span className="fw-bold">Evelyn Reed</span><br/>
                                <span className="small text-muted">Investorin</span>
                            </Button>
                            <Button variant="outline-secondary" className="p-3 text-start">
                                <span className="fw-bold">Ivan Petrov</span><br/>
                                <span className="small text-muted">Sicherheitschef</span>
                            </Button>
                        </div>
                    </div>
                    <div className="px-3 pb-3">
                        <Button variant="primary" className="w-100 fw-semibold" disabled>Stimme abgeben</Button>
                    </div>
                </Wireframe>
                <Wireframe title="12. Auflösung">
                    <div className="text-center pt-3 pb-2 border-bottom bg-danger-subtle">
                        <h4 className="fw-bold fs-6 text-danger-emphasis">Der Mörder war...</h4>
                        <p className="fs-5 fw-bold">Ivan Petrov!</p>
                    </div>
                    <div className="p-3 flex-grow-1 overflow-auto small">
                        <p>Sein Motiv war Rache, da das Opfer ihn erpresst hat. Die Mordwaffe war ein schwerer Schraubenschlüssel aus dem Werkzeugraum.</p>
                        <h5 className="fw-semibold pt-2 small">Abstimmungsergebnis</h5>
                        <ul className="list-unstyled small">
                            <li>Du hast für <strong>Evelyn Reed</strong> gestimmt.</li>
                            <li>Maria hat für <strong>Ivan Petrov</strong> gestimmt. (Korrekt!)</li>
                            <li>Jonas hat für <strong>Ivan Petrov</strong> gestimmt.</li>
                        </ul>
                    </div>
                    <div className="p-3 border-top">
                        <Button variant="primary" className="w-100 fw-semibold btn-sm">Alle Geschichten lesen</Button>
                    </div>
                </Wireframe>
                <Wireframe title="13. Host Notfall-Dashboard">
                    <div className="text-center pt-3 pb-2 border-bottom">
                        <h4 className="fw-bold fs-6 text-danger">Host Notfall-Dashboard</h4>
                        <p className="small text-muted">Spoiler-freie Steuerung (im Spiel)</p>
                    </div>
                    <div className="px-3 py-3 flex-grow-1 d-grid gap-3">
                        <div>
                            <h5 className="fw-semibold small">Spiel-Steuerung</h5>
                            <div className="d-grid gap-2">
                                <Button variant="warning" size="sm">Spiel Pausieren</Button>
                                <Button variant="info" size="sm">Nächste Runde erzwingen</Button>
                            </div>
                        </div>
                        <div>
                            <h5 className="fw-semibold small">Experten-Optionen</h5>
                            <Button variant="dark" size="sm" className="w-100">Hinweise neu generieren</Button>
                            <p className="text-muted small mt-1">Achtung: Generiert nur die Hinweise für die AKTUELLE Runde neu.</p>
                        </div>
                        <div>
                            <h5 className="fw-semibold small text-danger">Gefahrenzone</h5>
                            <Button variant="danger" size="sm" className="w-100">Spiel komplett neu starten</Button>
                            <p className="text-muted small mt-1">Beendet das Spiel für alle und startet die Lobby neu.</p>
                        </div>
                    </div>
                </Wireframe>
            </Row>
        </section>

        <section className="mb-5">
            <h2>5. API-Endpunkte & Datenbank-Interaktion</h2>
            <Row>
                <Col md={6}>
                    <h3>FastAPI-Backend</h3>
                    <ul className="list-group">
                        <li className="list-group-item"><code>POST /game/create</code></li>
                        <li className="list-group-item"><code>POST /game/{'{game_code}'}/join</code></li>
                        <li className="list-group-item"><code>GET /game/{'{game_code}'}/state</code></li>
                        <li className="list-group-item"><code>POST /game/{'{game_code}'}/vote</code></li>
                        <li className="list-group-item"><code>GET /game/{'{game_code}'}/character</code></li>
                        <li className="list-group-item"><code>/ws/{'{game_code}'}</code></li>
                    </ul>
                </Col>
                <Col md={6}>
                    <h3>Client-Interaktionen</h3>
                    <ul>
                        <li><strong>Supabase Auth (`supabase-js`):</strong> Nur für Login, Registrierung und Auth-Zustand.</li>
                        <li><strong>API-Client (z.B. Axios):</strong> Für alle HTTP-Anfragen an das FastAPI-Backend.</li>
                        <li><strong>WebSocket-Client:</strong> Für Echtzeit-Verbindung zum Backend.</li>
                    </ul>
                </Col>
            </Row>
        </section>

        <section className="mb-5">
            <h2>6. Datenmodelle</h2>
            <p>Die dedizierte PostgreSQL-Datenbank enthält die gesamte Spiellogik.</p>
            <h3 className="mt-4">Tabelle: `games`</h3>
            <Table striped bordered hover responsive>
                <thead>
                    <tr><th>Spalte</th><th>Datentyp</th><th>Beschreibung</th></tr>
                </thead>
                <tbody>
                    <tr><td>id</td><td>uuid</td><td>Eindeutige ID für ein Spiel.</td></tr>
                    <tr><td>host_id</td><td>uuid</td><td>Referenz auf die User-ID des Hosts.</td></tr>
                    <tr><td>game_code</td><td>varchar</td><td>Kurzer Code zum Beitreten.</td></tr>
                    <tr><td>status</td><td>varchar</td><td>setup, lobby, active, finished.</td></tr>
                    <tr><td>game_data</td><td>jsonb</td><td>Das komplette KI-generierte Szenario.</td></tr>
                </tbody>
            </Table>

            <h3 className="mt-4">Tabelle: `players`</h3>
            <Table striped bordered hover responsive>
                <thead>
                    <tr><th>Spalte</th><th>Datentyp</th><th>Beschreibung</th></tr>
                </thead>
                <tbody>
                    <tr><td>id</td><td>uuid</td><td>Eindeutiger Eintrag für einen Spieler.</td></tr>
                    <tr><td>game_id</td><td>uuid</td><td>Verweist auf das zugehörige Spiel.</td></tr>
                    <tr><td>player_id</td><td>uuid</td><td>Referenz auf die User-ID aus Supabase.</td></tr>
                    <tr><td>player_name</td><td>varchar</td><td>Der im Spiel angezeigte Name.</td></tr>
                    <tr><td>character_id</td><td>varchar</td><td>Verknüpft den Spieler mit seiner Rolle.</td></tr>
                </tbody>
            </Table>
        </section>

        <section className="mb-5">
            <h2>7. Prompt-Engineering-Strategie</h2>
            <Row>
                <Col md={6}>
                    <Card className="h-100">
                        <Card.Body>
                            <Card.Title>Prompt 1: Der kreative Autor</Card.Title>
                            <Card.Subtitle className="mb-2 text-muted">System-Prompt:</Card.Subtitle>
                            <Card.Text as="div"><pre className="bg-light p-2 rounded">Du bist ein preisgekrönter Autor von Kriminalromanen...</pre></Card.Text>
                            <Card.Subtitle className="mb-2 mt-3 text-muted">User-Prompt:</Card.Subtitle>
                            <Card.Text as="div"><pre className="bg-light p-2 rounded">Erstelle ein Krimi-Dinner-Szenario für 5 Spieler...</pre></Card.Text>
                        </Card.Body>
                    </Card>
                </Col>
                <Col md={6}>
                    <Card className="h-100">
                        <Card.Body>
                            <Card.Title>Prompt 2: Der Logik-Lektor</Card.Title>
                            <Card.Subtitle className="mb-2 text-muted">System-Prompt:</Card.Subtitle>
                            <Card.Text as="div"><pre className="bg-light p-2 rounded">Du bist ein extrem detailorientierter und logisch denkender Lektor...</pre></Card.Text>
                            <Card.Subtitle className="mb-2 mt-3 text-muted">User-Prompt:</Card.Subtitle>
                            <Card.Text as="div"><pre className="bg-light p-2 rounded">Hier ist ein JSON-Objekt. Bitte agiere als Logik-Lektor...</pre></Card.Text>
                        </Card.Body>
                    </Card>
                </Col>
            </Row>
        </section>

        <section className="mb-5">
            <h2>8. User Journey & Spielablauf</h2>
            <ol>
                <li><strong>Phase 0: Generierung & Vorbereitung:</strong> Host generiert Spiel und erhält Einladungscode.</li>
                <li><strong>Phase 1: Lobby:</strong> Spieler treten bei, Host startet das Spiel.</li>
                <li><strong>Phase 2: Rollenverteilung:</strong> Backend weist Rollen zu und sendet geheime Infos.</li>
                <li><strong>Phase 3: Spielrunden:</strong> System gibt pro Runde neue Hinweise frei.</li>
                <li><strong>Phase 4: Abstimmung & Auflösung:</strong> Abstimmung wird freigeschaltet, Mörder wird enthüllt.</li>
            </ol>
        </section>

        <section className="mb-5">
            <h2>9. Geschäftsmodell & Monetarisierung</h2>
            <Row>
                <Col md={6}>
                    <div className="p-3 bg-light rounded h-100">
                        <h3>Abonnement-Modell</h3>
                        <p>Nutzer zahlen einen monatlichen oder jährlichen Beitrag für ein festes Kontingent an Spielen.</p>
                    </div>
                </Col>
                <Col md={6}>
                    <div className="p-3 bg-light rounded h-100">
                        <h3>Einmalkauf (Pay-per-Game)</h3>
                        <p>Alternativ können Nutzer einzelne Spiele per Einmalkauf freischalten.</p>
                    </div>
                </Col>
            </Row>
        </section>

        <section className="mb-5">
            <h2>10. Skalierbarkeit, Kosten & Fehlerbehandlung</h2>
            <ul>
                <li><strong>Kostenkontrolle (OpenAI):</strong> Rate-Limiting auf dem Endpunkt zur Spielerstellung.</li>
                <li><strong>Fehlerbehandlung bei Generierung:</strong> Backend unternimmt automatische Wiederholungsversuche.</li>
                <li><strong>Nahtloses Wiederverbinden:</strong> Spieler können jederzeit wieder in ein laufendes Spiel einsteigen.</li>
                <li><strong>Notfall-Dashboard (Host):</strong> Spoiler-freies Admin-Panel für den Host zur Spielsteuerung.</li>
            </ul>
        </section>

        <section className="mb-5">
            <h2>11. Rechtliches & Datenschutz</h2>
            <ul>
                <li><strong>DSGVO-konforme Datenschutzerklärung</strong></li>
                <li><strong>Impressum</strong></li>
                <li><strong>Möglichkeit zur Löschung des Accounts</strong></li>
            </ul>
        </section>

      </Container>
    </div>
  );
}

export default KrimiDinner;
