<template>
  <div class="min-h-full py-16 bg-gray-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="mb-8">
        <h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
          API-Dokumentation
        </h1>
        <div class="w-24 h-1 bg-primary-600 mb-6" />
        <p class="text-xl text-gray-600">
          Übersicht über alle verfügbaren API-Endpoints und deren Verwendung
        </p>
      </div>

      <!-- Authentication Info -->
      <div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-lg mb-8">
        <h2 class="text-xl font-semibold text-blue-900 mb-2">
          Authentifizierung
        </h2>
        <p class="text-blue-800 mb-4">
          Alle API-Endpoints erfordern Authentifizierung (außer Login). Es werden zwei Methoden unterstützt:
        </p>
        <div class="space-y-3">
          <div>
            <strong class="text-blue-900">1. Cookie-basiert:</strong>
            <p class="text-blue-700 text-sm mt-1">
              Nach dem Login über <code>/api/auth/login</code> wird automatisch ein Cookie gesetzt.
            </p>
          </div>
          <div>
            <strong class="text-blue-900">2. Authorization Header:</strong>
            <p class="text-blue-700 text-sm mt-1">
              Header: <code>Authorization: Bearer &lt;token&gt;</code>
            </p>
            <p class="text-blue-700 text-sm">
              Der Token wird im Login-Response im Feld <code>token</code> zurückgegeben.
            </p>
          </div>
        </div>
      </div>

      <!-- Endpoints -->
      <div class="space-y-8">
        <!-- Authentication Endpoints -->
        <section class="bg-white rounded-xl shadow-lg p-6">
          <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
            Authentifizierung
          </h2>
          
          <div class="space-y-6">
            <!-- Login -->
            <div class="border-l-4 border-primary-600 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  POST /api/auth/login
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">Öffentlich</span>
              </div>
              <p class="text-gray-600 mb-3">
                Benutzer einloggen und Token erhalten
              </p>
              
              <div class="bg-gray-50 rounded-lg p-4 mb-3">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Request Body:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "email": "benutzer@example.com",
  "password": "passwort"
}</code></pre>
              </div>
              
              <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Response:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "success": true,
  "token": "JWT_TOKEN_PLACEHOLDER",
  "user": {
    "id": "user-id",
    "email": "benutzer@example.com",
    "name": "Max Mustermann",
    "role": "mitglied"
  }
}</code></pre>
              </div>
            </div>

            <!-- Logout -->
            <div class="border-l-4 border-primary-600 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  POST /api/auth/logout
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Auth erforderlich</span>
              </div>
              <p class="text-gray-600 mb-3">
                Benutzer ausloggen
              </p>
              
              <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Response:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "success": true,
  "message": "Erfolgreich ausgeloggt"
}</code></pre>
              </div>
            </div>

            <!-- Auth Status -->
            <div class="border-l-4 border-primary-600 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  GET /api/auth/status
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Auth erforderlich</span>
              </div>
              <p class="text-gray-600 mb-3">
                Aktuellen Authentifizierungsstatus abrufen
              </p>
              
              <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Response:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "isLoggedIn": true,
  "user": {
    "id": "user-id",
    "email": "benutzer@example.com",
    "name": "Max Mustermann",
    "role": "mitglied"
  },
  "role": "mitglied"
}</code></pre>
              </div>
            </div>
          </div>
        </section>

        <!-- Members Endpoints -->
        <section class="bg-white rounded-xl shadow-lg p-6">
          <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
            Mitglieder
          </h2>
          
          <div class="space-y-6">
            <!-- Get Members -->
            <div class="border-l-4 border-primary-600 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  GET /api/members
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Auth erforderlich</span>
              </div>
              <p class="text-gray-600 mb-3">
                Alle Mitglieder abrufen (mit Merge aus registrierten Benutzern)
              </p>
              
              <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Response:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "success": true,
  "members": [
    {
      "id": "member-id",
      "firstName": "Max",
      "lastName": "Mustermann",
      "geburtsdatum": "1990-01-15",
      "email": "max@example.com",
      "phone": "0123456789",
      "address": "Musterstraße 1",
      "source": "manual",
      "editable": true,
      "hasLogin": false
    }
  ]
}</code></pre>
              </div>
            </div>

            <!-- Post Members -->
            <div class="border-l-4 border-red-500 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  POST /api/members
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
              </div>
              <p class="text-gray-600 mb-3">
                Neues Mitglied hinzufügen oder bestehendes bearbeiten
              </p>
              
              <div class="bg-gray-50 rounded-lg p-4 mb-3">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Request Body:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "id": "optional-für-update",
  "firstName": "Max",
  "lastName": "Mustermann",
  "geburtsdatum": "1990-01-15",
  "email": "max@example.com",
  "phone": "0123456789",
  "address": "Musterstraße 1, 12345 Musterstadt",
  "notes": "Optional"
}</code></pre>
              </div>
              
              <div class="bg-gray-50 rounded-lg p-4 mb-3">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Response:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "success": true,
  "message": "Mitglied erfolgreich gespeichert."
}</code></pre>
              </div>

              <div class="mt-3 bg-blue-50 rounded-lg p-3">
                <p class="text-xs text-blue-800">
                  <strong>Hinweis:</strong> Ohne <code>id</code> wird ein neues Mitglied erstellt. Mit <code>id</code> wird ein bestehendes Mitglied aktualisiert. Bei neuen Mitgliedern ist <code>geburtsdatum</code> zur Duplikatsprüfung Pflicht (Format: YYYY-MM-DD). Altdaten ohne Geburtsdatum koennen weiter bearbeitet werden.
                </p>
              </div>
            </div>

            <!-- Bulk Import Members -->
            <div class="border-l-4 border-red-500 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  POST /api/members/bulk
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
              </div>
              <p class="text-gray-600 mb-3">
                Mehrere Mitglieder auf einmal importieren (Bulk-Import)
              </p>
              
              <div class="bg-gray-50 rounded-lg p-4 mb-3">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Request Body:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "members": [
    {
      "firstName": "Max",
      "lastName": "Mustermann",
      "geburtsdatum": "1990-01-15",
      "email": "max@example.com",
      "phone": "0123456789",
      "address": "Musterstraße 1",
      "notes": "Optional"
    },
    {
      "firstName": "Anna",
      "lastName": "Schmidt",
      "geburtsdatum": "1985-03-20",
      "email": "anna@example.com"
    }
  ]
}</code></pre>
              </div>
              
              <div class="bg-gray-50 rounded-lg p-4 mb-3">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Response:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "success": true,
  "summary": {
    "total": 2,
    "imported": 2,
    "duplicates": 0,
    "errors": 0
  },
  "results": {
    "success": [
      {
        "index": 1,
        "member": { ... }
      }
    ],
    "duplicates": [],
    "errors": []
  }
}</code></pre>
              </div>

              <div class="mt-3 bg-blue-50 rounded-lg p-3">
                <p class="text-xs text-blue-800 mb-2">
                  <strong>Features:</strong>
                </p>
                <ul class="text-xs text-blue-700 list-disc list-inside space-y-1">
                  <li>Duplikatsprüfung gegen bestehende Mitglieder</li>
                  <li>Duplikatsprüfung innerhalb des Imports</li>
                  <li>Validierung aller Daten vor dem Import</li>
                  <li>Detaillierte Fehlerberichte für jeden Eintrag</li>
                  <li>Nur erfolgreiche Einträge werden gespeichert</li>
                </ul>
              </div>
            </div>

            <!-- Delete Members -->
            <div class="border-l-4 border-red-500 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  DELETE /api/members
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
              </div>
              <p class="text-gray-600 mb-3">
                Mitglied löschen
              </p>
              
              <div class="bg-gray-50 rounded-lg p-4 mb-3">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Request Body:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "id": "member-id"
}</code></pre>
              </div>
              
              <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Response:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "success": true,
  "message": "Mitglied erfolgreich gelöscht."
}</code></pre>
              </div>
            </div>
          </div>
        </section>

        <!-- News Endpoints -->
        <section class="bg-white rounded-xl shadow-lg p-6">
          <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
            News
          </h2>
          
          <div class="space-y-6">
            <!-- Get News -->
            <div class="border-l-4 border-primary-600 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  GET /api/news
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Auth erforderlich</span>
              </div>
              <p class="text-gray-600 mb-3">
                Alle News abrufen (inkl. interner News)
              </p>
            </div>

            <!-- Post News -->
            <div class="border-l-4 border-red-500 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  POST /api/news
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
              </div>
              <p class="text-gray-600 mb-3">
                Neue News erstellen oder bestehende bearbeiten
              </p>
              
              <div class="bg-gray-50 rounded-lg p-4 mb-3">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Request Body:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "id": "optional-für-update",
  "title": "Titel der News",
  "content": "Inhalt der News",
  "isPublic": true,
  "expiresAt": "2025-12-31T23:59:59.000Z",
  "isHidden": false
}</code></pre>
              </div>
            </div>

            <!-- Delete News -->
            <div class="border-l-4 border-red-500 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  DELETE /api/news
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
              </div>
              <p class="text-gray-600 mb-3">
                News löschen
              </p>
              
              <div class="bg-gray-50 rounded-lg p-4 mb-3">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Request Body:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "id": "news-id"
}</code></pre>
              </div>
            </div>
          </div>
        </section>

        <!-- Termine Endpoints -->
        <section class="bg-white rounded-xl shadow-lg p-6">
          <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
            Termine
          </h2>
          
          <div class="space-y-6">
            <!-- Get Termine -->
            <div class="border-l-4 border-red-500 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  GET /api/termine-manage
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
              </div>
              <p class="text-gray-600 mb-3">
                Alle Termine abrufen (für Verwaltung)
              </p>
            </div>

            <!-- Post Termine -->
            <div class="border-l-4 border-red-500 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  POST /api/termine-manage
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
              </div>
              <p class="text-gray-600 mb-3">
                Neuen Termin erstellen
              </p>
              
              <div class="bg-gray-50 rounded-lg p-4 mb-3">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Request Body:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>{
  "datum": "2025-12-25",
  "uhrzeit": "19:00",
  "titel": "Weihnachtsfeier",
  "beschreibung": "Gemeinsame Feier",
  "kategorie": "Veranstaltung"
}</code></pre>
              </div>
            </div>

            <!-- Delete Termine -->
            <div class="border-l-4 border-red-500 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  DELETE /api/termine-manage
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
              </div>
              <p class="text-gray-600 mb-3">
                Termin löschen
              </p>
              
              <div class="bg-gray-50 rounded-lg p-4 mb-3">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Query Parameters:
                </p>
                <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto"><code>?datum=2025-12-25&uhrzeit=19:00&titel=Weihnachtsfeier&beschreibung=...&kategorie=...</code></pre>
              </div>
            </div>
          </div>
        </section>

        <!-- Config Endpoints -->
        <section class="bg-white rounded-xl shadow-lg p-6">
          <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
            Konfiguration
          </h2>
          
          <div class="space-y-6">
            <!-- Get Config -->
            <div class="border-l-4 border-red-500 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  GET /api/config
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
              </div>
              <p class="text-gray-600 mb-3">
                Vereinskonfiguration abrufen
              </p>
            </div>

            <!-- Put Config -->
            <div class="border-l-4 border-red-500 pl-4">
              <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-gray-900">
                  PUT /api/config
                </h3>
                <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
              </div>
              <p class="text-gray-600 mb-3">
                Vereinskonfiguration aktualisieren
              </p>
              
              <div class="bg-gray-50 rounded-lg p-4 mb-3">
                <p class="text-sm font-medium text-gray-700 mb-2">
                  Request Body:
                </p>
                <p class="text-xs text-gray-600">
                  Komplettes Config-Objekt mit allen Einstellungen
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>

      <!-- Example Usage -->
      <div class="mt-12 bg-white rounded-xl shadow-lg p-6">
        <h2 class="text-2xl font-display font-bold text-gray-900 mb-6">
          Beispiel-Usage
        </h2>
        
        <div class="space-y-4">
          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">
              cURL Beispiel:
            </h3>
            <pre class="text-xs bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto"><code># Login und Token erhalten
curl -X POST http://localhost:3100/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email": "admin@example.com", "password": "passwort"}'

# Mitglied hinzufügen mit Token
curl -X POST http://localhost:3100/api/members \
  -H "Authorization: Bearer &lt;your-jwt-token&gt;" \
  -H "Content-Type: application/json" \
  -d '{
    "firstName": "Max",
    "lastName": "Mustermann",
    "geburtsdatum": "1990-01-15",
    "email": "max@example.com",
    "phone": "0123456789"
  }'

# Bulk-Import von Mitgliedern
curl -X POST http://localhost:3100/api/members/bulk \
  -H "Authorization: Bearer &lt;your-jwt-token&gt;" \
  -H "Content-Type: application/json" \
  -d '{
    "members": [
      {
        "firstName": "Max",
        "lastName": "Mustermann",
        "geburtsdatum": "1990-01-15",
        "email": "max@example.com"
      },
      {
        "firstName": "Anna",
        "lastName": "Schmidt",
        "geburtsdatum": "1985-03-20",
        "email": "anna@example.com"
      }
    ]
  }'</code></pre>
          </div>

          <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">
              JavaScript/Fetch Beispiel:
            </h3>
            <pre class="text-xs bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto"><code>// Login
const loginResponse = await fetch('/api/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    email: 'admin@example.com',
    password: 'passwort'
  })
})
const { token } = await loginResponse.json()

// Mitglied hinzufügen
const memberResponse = await fetch('/api/members', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    firstName: 'Max',
    lastName: 'Mustermann',
    geburtsdatum: '1990-01-15',
    email: 'max@example.com'
  })
})

// Bulk-Import
const bulkResponse = await fetch('/api/members/bulk', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    members: [
      {
        firstName: 'Max',
        lastName: 'Mustermann',
        geburtsdatum: '1990-01-15',
        email: 'max@example.com'
      },
      {
        firstName: 'Anna',
        lastName: 'Schmidt',
        geburtsdatum: '1985-03-20',
        email: 'anna@example.com'
      }
    ]
  })
})
const result = await bulkResponse.json()
// Ergebnis: Importiert: ${result.summary.imported}, Duplikate: ${result.summary.duplicates}</code></pre>
          </div>
        </div>
      </div>

      <!-- Role Legend -->
      <div class="mt-8 bg-gray-50 rounded-xl p-6">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">
          Legende
        </h2>
        <div class="grid md:grid-cols-3 gap-4">
          <div class="flex items-center space-x-2">
            <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">Öffentlich</span>
            <span class="text-sm text-gray-600">Keine Authentifizierung erforderlich</span>
          </div>
          <div class="flex items-center space-x-2">
            <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Auth erforderlich</span>
            <span class="text-sm text-gray-600">Jeder eingeloggte Benutzer</span>
          </div>
          <div class="flex items-center space-x-2">
            <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">admin/vorstand</span>
            <span class="text-sm text-gray-600">Nur Admin oder Vorstand</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  middleware: 'auth',
  layout: 'default'
})

useHead({
  title: 'API-Dokumentation - Harheimer TC',
})
</script>

