"""
Base Component - CSS Variables, Base Styles, Theme Toggle
"""

def get_base_css() -> str:
    """CSS für Base Styles (Variables, Scrollbar, Layout) zurückgeben"""
    return """
        /* ==========================================
           DARK MODE (Default) - Original Design
           ========================================== */
        :root {
          --bp-primary: #0f766e;
          --bp-primary-soft: #ccfbf1;
          --bp-bg: #020617;
          --bp-surface: #020617;
          --bp-surface-elevated: rgba(15,23,42,0.9);
          --bp-border: #1f2937;
          --bp-border-subtle: rgba(148,163,184,0.25);
          --bp-accent: #22c55e;
          --bp-accent-soft: rgba(34,197,94,0.2);
          --bp-text: #e5e7eb;
          --bp-text-muted: #9ca3af;
          --bp-danger: #ef4444;
          --bp-gradient-bg: radial-gradient(circle at top left, #1f2937 0, #020617 50%, #000 100%);
          --bp-gradient-surface: radial-gradient(circle at top left, rgba(15,23,42,0.9) 0, #020617 50%, #000 100%);
          --bp-gradient-sidebar: radial-gradient(circle at top, #020617 0, #020617 40%, #000 100%);
          --bp-gradient-topbar: linear-gradient(to right, rgba(15,23,42,0.9), rgba(15,23,42,0.6));
          --bp-btn-primary-bg: linear-gradient(to right, var(--bp-primary), #15803d);
          --bp-btn-primary-hover: linear-gradient(to right, #0f766e, #166534);
          --bp-card-bg: var(--bp-gradient-surface);
          --bp-input-bg: rgba(255,255,255,0.05);
          --bp-scrollbar-track: rgba(15,23,42,0.5);
          --bp-scrollbar-thumb: rgba(148,163,184,0.5);
        }

        /* ==========================================
           LIGHT MODE - Website Design
           Farben aus BreakPilot Website:
           - Primary: Sky Blue #0ea5e9 (Modern, Vertrauen)
           - Accent: Fuchsia #d946ef (Kreativ, Energie)
           - Text: Slate #0f172a (Klarheit)
           - Background: White/Slate-50 (Clean, Professional)
           ========================================== */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

        [data-theme="light"] {
          --bp-primary: #0ea5e9;
          --bp-primary-soft: rgba(14, 165, 233, 0.1);
          --bp-bg: #f8fafc;
          --bp-surface: #FFFFFF;
          --bp-surface-elevated: #FFFFFF;
          --bp-border: #e2e8f0;
          --bp-border-subtle: rgba(14, 165, 233, 0.2);
          --bp-accent: #d946ef;
          --bp-accent-soft: rgba(217, 70, 239, 0.15);
          --bp-text: #0f172a;
          --bp-text-muted: #64748b;
          --bp-danger: #ef4444;
          --bp-gradient-bg: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
          --bp-gradient-surface: linear-gradient(145deg, #FFFFFF 0%, #f8fafc 100%);
          --bp-gradient-sidebar: linear-gradient(180deg, #FFFFFF 0%, #f1f5f9 100%);
          --bp-gradient-topbar: linear-gradient(to right, #FFFFFF, #f8fafc);
          --bp-btn-primary-bg: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
          --bp-btn-primary-hover: linear-gradient(135deg, #0284c7 0%, #c026d3 100%);
          --bp-card-bg: linear-gradient(145deg, #FFFFFF 0%, #f8fafc 100%);
          --bp-input-bg: #FFFFFF;
          --bp-scrollbar-track: rgba(0,0,0,0.05);
          --bp-scrollbar-thumb: rgba(14, 165, 233, 0.3);
          --bp-gold: #eab308;
        }

        [data-theme="light"] body {
          font-family: 'Inter', system-ui, -apple-system, sans-serif;
        }

        * { box-sizing: border-box; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }

        ::-webkit-scrollbar-track {
          background: var(--bp-scrollbar-track);
          border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
          background: var(--bp-scrollbar-thumb);
          border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
          background: var(--bp-scrollbar-thumb);
          opacity: 0.8;
        }

        html, body {
          height: 100%;
        }

        body {
          margin: 0;
          padding: 0;
          font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
          background: var(--bp-gradient-bg);
          color: var(--bp-text);
          min-height: 100vh;
          display: flex;
          flex-direction: column;
          transition: background 0.3s ease, color 0.3s ease;
        }

        .app-root {
          display: grid;
          grid-template-rows: 56px 1fr 32px;
          flex: 1;
          min-height: 0;
        }

        .topbar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          border-bottom: 1px solid var(--bp-border-subtle);
          backdrop-filter: blur(18px);
          background: var(--bp-gradient-topbar);
          transition: background 0.3s ease, border-color 0.3s ease;
        }

        .brand {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .brand-logo {
          width: 28px;
          height: 28px;
          border-radius: 999px;
          border: 2px solid var(--bp-accent);
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 14px;
          color: var(--bp-accent);
        }

        .brand-text-main {
          font-weight: 600;
          font-size: 16px;
        }

        .brand-text-sub {
          font-size: 12px;
          color: var(--bp-text-muted);
        }

        .top-nav {
          display: flex;
          align-items: center;
          gap: 18px;
          font-size: 13px;
        }

        .top-nav-item {
          cursor: pointer;
          padding: 4px 10px;
          border-radius: 999px;
          color: var(--bp-text-muted);
          border: 1px solid transparent;
        }

        .top-nav-item.active {
          color: var(--bp-primary);
          border-color: var(--bp-accent-soft);
          background: var(--bp-surface-elevated);
        }

        [data-theme="light"] .top-nav-item.active {
          color: var(--bp-primary);
          background: var(--bp-primary-soft);
          border-color: var(--bp-primary);
        }

        .top-actions {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .pill {
          font-size: 11px;
          padding: 4px 10px;
          border-radius: 999px;
          border: 1px solid var(--bp-border-subtle);
          color: var(--bp-text-muted);
        }

        /* Theme Toggle Button */
        .theme-toggle {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 4px 10px;
          border-radius: 999px;
          border: 1px solid var(--bp-border-subtle);
          background: var(--bp-surface-elevated);
          color: var(--bp-text-muted);
          cursor: pointer;
          font-size: 11px;
          transition: all 0.2s ease;
        }

        .theme-toggle:hover {
          border-color: var(--bp-primary);
          color: var(--bp-primary);
        }

        .theme-toggle-icon {
          font-size: 14px;
        }
"""


def get_base_html() -> str:
    """HTML für Base Layout zurückgeben"""
    return """
      <div class="app-root">
        <div class="topbar">
          <div class="brand">
            <div class="brand-logo">BP</div>
            <div>
              <div class="brand-text-main">BreakPilot</div>
              <div class="brand-text-sub" data-i18n="brand_sub">Studio</div>
            </div>
          </div>
          <div class="top-nav">
            <span class="top-nav-item" data-i18n="nav_compare">Arbeitsblätter</span>
            <span class="top-nav-item" data-i18n="nav_tiles">Lern-Kacheln</span>
          </div>
          <div class="top-actions">
            <span class="pill" data-i18n="mvp_local">MVP · Lokal auf deinem Mac</span>
            <button id="theme-toggle" class="theme-toggle">
              <span id="theme-icon" class="theme-toggle-icon">🌙</span>
              <span id="theme-label">Dark</span>
            </button>
            <button id="auth-toggle" class="pill" style="cursor: pointer;" data-i18n="login">Login / Anmeldung</button>
          </div>
        </div>

        <!-- Main content area will be inserted here -->
        <div class="main-content"></div>

        <div class="footer">
          <span>© 2025 BreakPilot</span>
          <span style="display: flex; gap: 12px; font-size: 11px;">
            <a id="open-imprint" style="cursor: pointer; color: var(--bp-text-muted);">Impressum</a>
            <a id="open-terms" style="cursor: pointer; color: var(--bp-text-muted);">AGB</a>
            <a id="open-privacy" style="cursor: pointer; color: var(--bp-text-muted);">Datenschutz</a>
            <a id="open-cookies" style="cursor: pointer; color: var(--bp-text-muted);">Cookies</a>
            <a id="open-community" style="cursor: pointer; color: var(--bp-text-muted);">Community</a>
            <a id="open-gdpr" style="cursor: pointer; color: var(--bp-text-muted);">Deine Rechte</a>
            <a id="open-settings" style="cursor: pointer; color: var(--bp-text-muted);">Einstellungen</a>
          </span>
        </div>
      </div>
"""


def get_base_js() -> str:
    """JavaScript für Theme Toggle zurückgeben"""
    return """
        // ==========================================
        // THEME TOGGLE (Dark/Light Mode)
        // ==========================================
        (function() {
          const savedTheme = localStorage.getItem('bp-theme') || 'dark';
          if (savedTheme === 'light') {
            document.documentElement.setAttribute('data-theme', 'light');
          }
        })();

        function initThemeToggle() {
          const toggle = document.getElementById('theme-toggle');
          const icon = document.getElementById('theme-icon');
          const label = document.getElementById('theme-label');

          function updateToggleUI(theme) {
            if (theme === 'light') {
              icon.textContent = '☀️';
              label.textContent = 'Light';
            } else {
              icon.textContent = '🌙';
              label.textContent = 'Dark';
            }
          }

          // Initialize UI based on current theme
          const currentTheme = document.documentElement.getAttribute('data-theme') || 'dark';
          updateToggleUI(currentTheme);

          toggle.addEventListener('click', function() {
            const current = document.documentElement.getAttribute('data-theme') || 'dark';
            const newTheme = current === 'dark' ? 'light' : 'dark';

            if (newTheme === 'light') {
              document.documentElement.setAttribute('data-theme', 'light');
            } else {
              document.documentElement.removeAttribute('data-theme');
            }

            localStorage.setItem('bp-theme', newTheme);
            updateToggleUI(newTheme);
          });
        }
"""