from fastapi import APIRouter
from fastapi.responses import HTMLResponse

from .components import (
    base,
    legal_modal,
    auth_modal,
    admin_panel,
    admin_email,
    admin_dsms,
    admin_stats,
)

router = APIRouter()


# Include all remaining CSS that's not in components (buttons, forms, notifications, etc.)
def get_shared_css() -> str:
    """CSS für gemeinsam genutzte Styles (Buttons, Forms, Inputs, Notifications, etc.)"""
    # This would be extracted from the original file - keeping styles for:
    # - Buttons (.btn, .btn-primary, etc.)
    # - Forms (input, select, textarea)
    # - Notifications
    # - User Dropdown
    # - Sidebar
    # - Content area
    # - Cards
    # - Lightbox
    # - etc.

    # For now, returning a placeholder - in production, this would include
    # all the CSS from lines ~500-1200 of the original file
    return """
        /* Shared CSS will be extracted here */
        /* This includes buttons, forms, sidebar, content area, cards, etc. */
    """


# Include all remaining HTML that's not in modals (sidebar, content area, etc.)
def get_main_html() -> str:
    """HTML für Haupt-Anwendungsbereich (Sidebar, Content, etc.)"""
    # This would be extracted from the original file
    # For now, returning a placeholder
    return """
      <div class="app-root">
        <header class="topbar">
          <!-- Topbar content would be here -->
        </header>

        <div class="main-layout">
          <aside class="sidebar">
            <!-- Sidebar content would be here -->
          </aside>

          <main class="content">
            <!-- Main content panels would be here -->
          </main>
        </div>
      </div>
    """


# Include all remaining JavaScript (i18n, initialization, etc.)
def get_shared_js() -> str:
    """JavaScript für gemeinsam genutzte Funktionen (i18n, init, etc.)"""
    return """
        /* Shared JavaScript will be extracted here */
        /* This includes i18n, notifications, initialization, etc. */
    """


@router.get("/app", response_class=HTMLResponse)
def app_ui():
    """
    Refactored Studio UI - Modulare Komponenten-Architektur

    Die monolithische studio.py (11.703 Zeilen) wurde in 7 Komponenten aufgeteilt:

    - components/base.py: CSS Variables, Base Styles, Theme Toggle (~300 Zeilen)
    - components/legal_modal.py: Legal/Consent Modal (~1.200 Zeilen)
    - components/auth_modal.py: Auth/Login/Register Modal (~1.500 Zeilen)
    - components/admin_panel.py: Admin Panel Core (~3.000 Zeilen)
    - components/admin_email.py: E-Mail Template Management (~1.000 Zeilen)
    - components/admin_dsms.py: DSMS/IPFS WebUI (~1.500 Zeilen)
    - components/admin_stats.py: Statistics & GDPR Export (~700 Zeilen)

    Diese Datei orchestriert die Komponenten und fügt sie zusammen.
    """

    return f"""
    <!DOCTYPE html>
    <html lang="de">
    <head>
      <meta charset="UTF-8">
      <title>BreakPilot – Arbeitsblatt Studio</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
        {base.get_base_css()}

        {get_shared_css()}

        {legal_modal.get_legal_modal_css()}

        {auth_modal.get_auth_modal_css()}

        {admin_panel.get_admin_panel_css()}

        {admin_dsms.get_admin_dsms_css()}
      </style>
    </head>
    <body>
      {get_main_html()}

      <!-- Legal Modal (AGB, Datenschutz, etc.) -->
      {legal_modal.get_legal_modal_html()}

      <!-- Auth Modal (Login/Register) -->
      {auth_modal.get_auth_modal_html()}

      <!-- Admin Panel Modal -->
      {admin_panel.get_admin_panel_html()}

      <!-- DSMS WebUI Modal -->
      {admin_dsms.get_admin_dsms_html()}

      <script>
        {base.get_base_js()}

        {get_shared_js()}

        {legal_modal.get_legal_modal_js()}

        {auth_modal.get_auth_modal_js()}

        {admin_panel.get_admin_panel_js()}

        {admin_email.get_admin_email_js()}

        {admin_stats.get_admin_stats_js()}

        {admin_dsms.get_admin_dsms_js()}
      </script>
    </body>
    </html>
    """
