<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>BreakPilot - Mein Konto</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/static/css/customer.css">
</head>
<body data-theme="light">
  <div class="app-root">
    <!-- Header -->
    <header class="header">
      <div class="header-content">
        <a href="/" class="brand">
          <div class="brand-logo">BP</div>
          <div class="brand-text">
            <span class="brand-name">BreakPilot</span>
            <span class="brand-sub">Mein Konto</span>
          </div>
        </a>
        <nav class="header-nav">
          <button class="btn btn-ghost" id="btn-theme" title="Theme wechseln">
            <span id="theme-icon">🌙</span>
          </button>
          <button class="btn btn-ghost" id="btn-legal" title="Rechtliches">
            ⚖️
          </button>
          <button class="btn btn-primary" id="btn-login">
            Anmelden
          </button>
          <!-- User Menu (hidden when not logged in) -->
          <div class="user-menu hidden" id="user-menu">
            <button class="user-menu-btn" id="user-menu-btn">
              <span class="user-avatar">BP</span>
              <span class="user-name" id="user-name">Benutzer</span>
              <span>▼</span>
            </button>
            <div class="user-dropdown" id="user-dropdown">
              <div class="user-dropdown-header">
                <span class="user-dropdown-name" id="dropdown-name">Benutzer</span>
                <span class="user-dropdown-email" id="dropdown-email">user@example.com</span>
              </div>
              <hr>
              <button class="user-dropdown-item" onclick="showMyConsents()">
                📋 Meine Zustimmungen
              </button>
              <button class="user-dropdown-item" onclick="showDataExport()">
                📥 Daten exportieren
              </button>
              <hr>
              <button class="user-dropdown-item danger" onclick="logout()">
                🚪 Abmelden
              </button>
            </div>
          </div>
        </nav>
      </div>
    </header>

    <!-- Main Content -->
    <main class="main">
      <!-- Welcome Section (shown when not logged in) -->
      <section class="welcome-section" id="welcome-section">
        <div class="welcome-card">
          <h1>Willkommen bei BreakPilot</h1>
          <p>Melden Sie sich an, um Ihre Zustimmungen zu verwalten und Ihre Daten zu exportieren.</p>
          <button class="btn btn-primary btn-lg" onclick="showLoginModal()">
            Jetzt anmelden
          </button>
        </div>
      </section>

      <!-- Dashboard (shown when logged in) -->
      <section class="dashboard hidden" id="dashboard">
        <div class="dashboard-header">
          <h1>Mein Konto</h1>
          <p>Verwalten Sie Ihre Einstellungen und Zustimmungen</p>
        </div>

        <div class="dashboard-grid">
          <!-- My Consents Card -->
          <div class="dashboard-card" onclick="showMyConsents()">
            <div class="card-icon">📋</div>
            <h2>Meine Zustimmungen</h2>
            <p>Sehen Sie alle Dokumente ein, denen Sie zugestimmt haben.</p>
            <span class="card-badge" id="consent-count">0 aktiv</span>
          </div>

          <!-- Data Export Card -->
          <div class="dashboard-card" onclick="showDataExport()">
            <div class="card-icon">📥</div>
            <h2>Datenexport</h2>
            <p>Fordern Sie einen Export aller Ihrer gespeicherten Daten an (DSGVO Art. 15).</p>
            <span class="card-badge">DSGVO</span>
          </div>

          <!-- Account Settings Card -->
          <div class="dashboard-card" onclick="showAccountSettings()">
            <div class="card-icon">⚙️</div>
            <h2>Kontoeinstellungen</h2>
            <p>Verwalten Sie Ihr Profil und Ihre Sicherheitseinstellungen.</p>
          </div>
        </div>
      </section>
    </main>

    <!-- Footer -->
    <footer class="footer">
      <div class="footer-content">
        <span>&copy; 2024 BreakPilot. Alle Rechte vorbehalten.</span>
        <nav class="footer-nav">
          <a href="#" onclick="showLegalDocument('privacy')">Datenschutz</a>
          <a href="#" onclick="showLegalDocument('imprint')">Impressum</a>
          <a href="#" onclick="showLegalDocument('terms')">AGB</a>
        </nav>
      </div>
    </footer>
  </div>

  <!-- Login Modal -->
  <div class="modal" id="login-modal">
    <div class="modal-backdrop" onclick="closeAllModals()"></div>
    <div class="modal-content">
      <div class="modal-header">
        <h2>Anmelden</h2>
        <button class="modal-close" onclick="closeAllModals()">&times;</button>
      </div>
      <div class="modal-body">
        <!-- Tab Navigation -->
        <div class="auth-tabs">
          <button class="auth-tab active" data-tab="login" onclick="switchAuthTab('login')">Anmelden</button>
          <button class="auth-tab" data-tab="register" onclick="switchAuthTab('register')">Registrieren</button>
        </div>

        <!-- Login Form -->
        <form id="login-form" class="auth-form">
          <div class="form-message" id="login-message"></div>
          <div class="form-group">
            <label>E-Mail</label>
            <input type="email" id="login-email" required placeholder="ihre@email.de">
          </div>
          <div class="form-group">
            <label>Passwort</label>
            <input type="password" id="login-password" required placeholder="Ihr Passwort">
          </div>
          <button type="submit" class="btn btn-primary btn-full">Anmelden</button>
          <p class="form-hint">
            <a href="#" onclick="showForgotPassword()">Passwort vergessen?</a>
          </p>
        </form>

        <!-- Register Form -->
        <form id="register-form" class="auth-form hidden">
          <div class="form-message" id="register-message"></div>
          <div class="form-group">
            <label>Name</label>
            <input type="text" id="register-name" placeholder="Ihr Name">
          </div>
          <div class="form-group">
            <label>E-Mail</label>
            <input type="email" id="register-email" required placeholder="ihre@email.de">
          </div>
          <div class="form-group">
            <label>Passwort</label>
            <input type="password" id="register-password" required minlength="8" placeholder="Mind. 8 Zeichen">
          </div>
          <div class="form-group">
            <label>Passwort wiederholen</label>
            <input type="password" id="register-password-confirm" required placeholder="Passwort wiederholen">
          </div>
          <button type="submit" class="btn btn-primary btn-full">Registrieren</button>
        </form>

        <!-- Forgot Password Form -->
        <form id="forgot-form" class="auth-form hidden">
          <div class="form-message" id="forgot-message"></div>
          <p>Geben Sie Ihre E-Mail-Adresse ein, um einen Link zum Zurücksetzen Ihres Passworts zu erhalten.</p>
          <div class="form-group">
            <label>E-Mail</label>
            <input type="email" id="forgot-email" required placeholder="ihre@email.de">
          </div>
          <button type="submit" class="btn btn-primary btn-full">Link senden</button>
          <p class="form-hint">
            <a href="#" onclick="switchAuthTab('login')">Zurück zur Anmeldung</a>
          </p>
        </form>
      </div>
    </div>
  </div>

  <!-- My Consents Modal -->
  <div class="modal" id="consents-modal">
    <div class="modal-backdrop" onclick="closeAllModals()"></div>
    <div class="modal-content modal-lg">
      <div class="modal-header">
        <h2>Meine Zustimmungen</h2>
        <button class="modal-close" onclick="closeAllModals()">&times;</button>
      </div>
      <div class="modal-body">
        <div class="consents-loading" id="consents-loading">Lade Zustimmungen...</div>
        <div class="consents-list" id="consents-list"></div>
        <div class="consents-empty hidden" id="consents-empty">
          <p>Sie haben noch keinen Dokumenten zugestimmt.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Data Export Modal -->
  <div class="modal" id="export-modal">
    <div class="modal-backdrop" onclick="closeAllModals()"></div>
    <div class="modal-content">
      <div class="modal-header">
        <h2>Datenexport anfordern</h2>
        <button class="modal-close" onclick="closeAllModals()">&times;</button>
      </div>
      <div class="modal-body">
        <div class="export-info">
          <p>
            <strong>DSGVO Art. 15 - Auskunftsrecht</strong><br>
            Sie haben das Recht, eine Kopie aller Ihrer bei uns gespeicherten Daten zu erhalten.
          </p>
          <p>
            Nach Ihrer Anfrage erhalten Sie innerhalb von 30 Tagen eine E-Mail mit einem Download-Link.
          </p>
        </div>
        <div class="form-message" id="export-message"></div>
        <div class="export-actions">
          <button class="btn btn-primary" id="btn-request-export" onclick="requestDataExport()">
            Datenexport anfordern
          </button>
        </div>
        <div class="export-status hidden" id="export-status">
          <h3>Ihre Anfragen</h3>
          <div id="export-requests-list"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Legal Document Modal -->
  <div class="modal" id="legal-modal">
    <div class="modal-backdrop" onclick="closeAllModals()"></div>
    <div class="modal-content modal-lg">
      <div class="modal-header">
        <h2 id="legal-title">Dokument</h2>
        <button class="modal-close" onclick="closeAllModals()">&times;</button>
      </div>
      <div class="modal-body">
        <div class="legal-loading" id="legal-loading">Lade Dokument...</div>
        <div class="legal-content" id="legal-content"></div>
      </div>
    </div>
  </div>

  <!-- Account Settings Modal -->
  <div class="modal" id="settings-modal">
    <div class="modal-backdrop" onclick="closeAllModals()"></div>
    <div class="modal-content">
      <div class="modal-header">
        <h2>Kontoeinstellungen</h2>
        <button class="modal-close" onclick="closeAllModals()">&times;</button>
      </div>
      <div class="modal-body">
        <div class="settings-section">
          <h3>Profil</h3>
          <form id="profile-form">
            <div class="form-message" id="profile-message"></div>
            <div class="form-group">
              <label>Name</label>
              <input type="text" id="profile-name" placeholder="Ihr Name">
            </div>
            <div class="form-group">
              <label>E-Mail</label>
              <input type="email" id="profile-email" disabled>
            </div>
            <button type="submit" class="btn btn-primary">Speichern</button>
          </form>
        </div>
        <hr>
        <div class="settings-section">
          <h3>Passwort ändern</h3>
          <form id="password-form">
            <div class="form-message" id="password-message"></div>
            <div class="form-group">
              <label>Aktuelles Passwort</label>
              <input type="password" id="current-password" required>
            </div>
            <div class="form-group">
              <label>Neues Passwort</label>
              <input type="password" id="new-password" required minlength="8">
            </div>
            <div class="form-group">
              <label>Neues Passwort wiederholen</label>
              <input type="password" id="new-password-confirm" required>
            </div>
            <button type="submit" class="btn btn-primary">Passwort ändern</button>
          </form>
        </div>
        <hr>
        <div class="settings-section danger-zone">
          <h3>Gefahrenzone</h3>
          <p>Das Löschen Ihres Kontos kann nicht rückgängig gemacht werden.</p>
          <button class="btn btn-danger" onclick="confirmDeleteAccount()">
            Konto löschen
          </button>
        </div>
      </div>
    </div>
  </div>

  <script src="/static/js/customer.js"></script>
</body>
</html>
