"""
BreakPilot Studio - Lehrer Onboarding Modul

Ein intuitives Willkommens-Dashboard fuer Lehrer, die BreakPilot zum ersten Mal nutzen.
Zeigt den Workflow und bietet schnellen Zugang zu allen wichtigen Funktionen.
"""


class LehrerOnboardingModule:
    """Onboarding-Dashboard fuer neue Lehrer."""

    @staticmethod
    def get_css() -> str:
        """CSS fuer das Lehrer-Onboarding Modul."""
        return """
/* =============================================
   LEHRER ONBOARDING MODULE
   ============================================= */

/* Container */
.lehrer-onboarding-container {
  max-width: 100%;
  min-height: 100%;
  background: var(--bp-bg, #0f172a);
  color: var(--bp-text, #e2e8f0);
}

/* Hero Section */
.lehrer-hero {
  background: linear-gradient(135deg, var(--bp-primary, #6C1B1B) 0%, #4a1010 100%);
  padding: 48px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.lehrer-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.lehrer-hero-icon {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 40px;
  backdrop-filter: blur(10px);
}

.lehrer-hero h1 {
  color: white;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px 0;
  position: relative;
}

.lehrer-hero p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

/* Content Container */
.lehrer-content {
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Section Titles */
.lehrer-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--bp-text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lehrer-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bp-border, #334155);
}

/* Workflow Steps */
.lehrer-workflow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

@media (max-width: 900px) {
  .lehrer-workflow {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .lehrer-workflow {
    grid-template-columns: 1fr;
  }
}

.lehrer-step {
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.lehrer-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  border-color: var(--bp-primary);
}

.lehrer-step-number {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  background: var(--bp-primary);
  color: white;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--bp-bg);
}

.lehrer-step-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.lehrer-step h3 {
  color: var(--bp-text);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.lehrer-step p {
  color: var(--bp-text-muted);
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

/* Quick Actions Grid */
.lehrer-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

@media (max-width: 900px) {
  .lehrer-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .lehrer-actions {
    grid-template-columns: 1fr;
  }
}

.lehrer-action-card {
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.lehrer-action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.lehrer-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bp-primary);
  opacity: 0;
  transition: opacity 0.3s;
}

.lehrer-action-card:hover::before {
  opacity: 1;
}

.lehrer-action-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 16px;
}

/* Icon Colors */
.lehrer-action-card.worksheets .lehrer-action-icon {
  background: rgba(59, 130, 246, 0.15);
}

.lehrer-action-card.correction .lehrer-action-icon {
  background: rgba(16, 185, 129, 0.15);
}

.lehrer-action-card.letters .lehrer-action-icon {
  background: rgba(236, 72, 153, 0.15);
}

.lehrer-action-card.abitur .lehrer-action-icon {
  background: rgba(168, 85, 247, 0.15);
}

.lehrer-action-card.classes .lehrer-action-icon {
  background: rgba(245, 158, 11, 0.15);
}

.lehrer-action-card.meet .lehrer-action-icon {
  background: rgba(139, 92, 246, 0.15);
}

.lehrer-action-title {
  color: var(--bp-text);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.lehrer-action-desc {
  color: var(--bp-text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.lehrer-action-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bp-primary);
  font-size: 14px;
  font-weight: 500;
}

.lehrer-action-cta::after {
  content: '→';
  transition: transform 0.2s;
}

.lehrer-action-card:hover .lehrer-action-cta::after {
  transform: translateX(4px);
}

.lehrer-action-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.lehrer-action-badge.new {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.lehrer-action-badge.popular {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.lehrer-action-badge.ai {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

/* Tips Section */
.lehrer-tips {
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 48px;
}

.lehrer-tips-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.lehrer-tips-icon {
  width: 40px;
  height: 40px;
  background: rgba(59, 130, 246, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.lehrer-tips-header h3 {
  color: var(--bp-text);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.lehrer-tips-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 700px) {
  .lehrer-tips-list {
    grid-template-columns: 1fr;
  }
}

.lehrer-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lehrer-tip-check {
  width: 24px;
  height: 24px;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #22c55e;
  font-size: 14px;
}

.lehrer-tip-text {
  color: var(--bp-text);
  font-size: 14px;
  line-height: 1.5;
}

/* Help Section */
.lehrer-help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: 16px;
}

.lehrer-help-text {
  color: var(--bp-text-muted);
  font-size: 14px;
}

.lehrer-help-link {
  color: var(--bp-primary);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
}

.lehrer-help-link:hover {
  color: var(--bp-primary-hover);
  text-decoration: underline;
}

/* Progress Indicator (optional, fuer zukuenftige Features) */
.lehrer-progress {
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 48px;
}

.lehrer-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.lehrer-progress-header h3 {
  color: var(--bp-text);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.lehrer-progress-value {
  color: var(--bp-primary);
  font-weight: 600;
}

.lehrer-progress-bar {
  height: 8px;
  background: var(--bp-border);
  border-radius: 4px;
  overflow: hidden;
}

.lehrer-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bp-primary), #a855f7);
  border-radius: 4px;
  transition: width 0.5s ease;
}
"""

    @staticmethod
    def get_html() -> str:
        """HTML fuer das Lehrer-Onboarding Modul."""
        return """
<!-- Lehrer Onboarding Panel -->
<div class="panel panel-lehrer-onboarding" id="panel-lehrer-onboarding" style="display: none;">
  <div class="lehrer-onboarding-container">
  <!-- Hero Section -->
  <div class="lehrer-hero">
    <div class="lehrer-hero-icon">👋</div>
    <h1>Willkommen bei BreakPilot!</h1>
    <p>Dein digitaler Assistent fuer den Schulalltag. Entdecke, wie du Zeit sparst und deinen Unterricht effizienter gestaltest.</p>
  </div>

  <!-- Content -->
  <div class="lehrer-content">
    <!-- Workflow Section -->
    <div class="lehrer-section-title">So funktioniert BreakPilot</div>
    <div class="lehrer-workflow">
      <div class="lehrer-step">
        <div class="lehrer-step-number">1</div>
        <div class="lehrer-step-icon">📤</div>
        <h3>Material hochladen</h3>
        <p>Lade Arbeitsblaetter, Klausuren oder Elternbriefe hoch</p>
      </div>
      <div class="lehrer-step">
        <div class="lehrer-step-number">2</div>
        <div class="lehrer-step-icon">🤖</div>
        <h3>KI unterstuetzt</h3>
        <p>Die KI analysiert und erstellt Vorschlaege</p>
      </div>
      <div class="lehrer-step">
        <div class="lehrer-step-number">3</div>
        <div class="lehrer-step-icon">✏️</div>
        <h3>Anpassen</h3>
        <p>Pruefe und passe die Vorschlaege nach Bedarf an</p>
      </div>
      <div class="lehrer-step">
        <div class="lehrer-step-number">4</div>
        <div class="lehrer-step-icon">✅</div>
        <h3>Fertig!</h3>
        <p>Exportiere als PDF oder teile direkt mit Schuelern</p>
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="lehrer-section-title">Jetzt starten</div>
    <div class="lehrer-actions">
      <!-- Arbeitsblaetter -->
      <div class="lehrer-action-card worksheets" onclick="loadModule('worksheets')">
        <span class="lehrer-action-badge popular">Beliebt</span>
        <div class="lehrer-action-icon">📝</div>
        <h3 class="lehrer-action-title">Arbeitsblaetter erstellen</h3>
        <p class="lehrer-action-desc">Lade PDFs hoch und erstelle interaktive Lernmaterialien mit KI-Unterstuetzung.</p>
        <div class="lehrer-action-cta">Jetzt starten</div>
      </div>

      <!-- Abiturklausuren -->
      <div class="lehrer-action-card abitur" onclick="loadModule('klausur-korrektur')">
        <span class="lehrer-action-badge ai">KI</span>
        <div class="lehrer-action-icon">🎓</div>
        <h3 class="lehrer-action-title">Abiturklausuren korrigieren</h3>
        <p class="lehrer-action-desc">15-Punkte-System, Erwartungshorizont und automatische Gutachten.</p>
        <div class="lehrer-action-cta">Korrektur starten</div>
      </div>

      <!-- Klausuren & Tests -->
      <div class="lehrer-action-card correction" onclick="loadModule('correction')">
        <div class="lehrer-action-icon">✅</div>
        <h3 class="lehrer-action-title">Klausuren korrigieren</h3>
        <p class="lehrer-action-desc">Scanne Klausuren und lass die KI bei der Korrektur helfen.</p>
        <div class="lehrer-action-cta">Korrektur starten</div>
      </div>

      <!-- Elternbriefe -->
      <div class="lehrer-action-card letters" onclick="loadModule('letters')">
        <div class="lehrer-action-icon">✉️</div>
        <h3 class="lehrer-action-title">Elternbriefe schreiben</h3>
        <p class="lehrer-action-desc">Rechtssichere Elternbriefe mit GFK-Analyse und Vorlagen.</p>
        <div class="lehrer-action-cta">Brief erstellen</div>
      </div>

      <!-- Klassen verwalten -->
      <div class="lehrer-action-card classes" onclick="loadModule('school-classes')">
        <div class="lehrer-action-icon">👨‍👩‍👧‍👦</div>
        <h3 class="lehrer-action-title">Klassen verwalten</h3>
        <p class="lehrer-action-desc">Schueler, Noten und Klassenbuch an einem Ort.</p>
        <div class="lehrer-action-cta">Klassen oeffnen</div>
      </div>

      <!-- Videokonferenz -->
      <div class="lehrer-action-card meet" onclick="loadModule('jitsi')">
        <div class="lehrer-action-icon">🎥</div>
        <h3 class="lehrer-action-title">Videokonferenz starten</h3>
        <p class="lehrer-action-desc">Elterngespraeche und Konferenzen per Video.</p>
        <div class="lehrer-action-cta">Meeting planen</div>
      </div>
    </div>

    <!-- Tips Section -->
    <div class="lehrer-section-title">Tipps fuer den Einstieg</div>
    <div class="lehrer-tips">
      <div class="lehrer-tips-header">
        <div class="lehrer-tips-icon">💡</div>
        <h3>Das solltest du wissen</h3>
      </div>
      <div class="lehrer-tips-list">
        <div class="lehrer-tip">
          <div class="lehrer-tip-check">✓</div>
          <div class="lehrer-tip-text"><strong>Tastenkuerzel:</strong> Druecke <kbd>Ctrl+K</kbd> um schnell zwischen Modulen zu suchen.</div>
        </div>
        <div class="lehrer-tip">
          <div class="lehrer-tip-check">✓</div>
          <div class="lehrer-tip-text"><strong>Datensicherheit:</strong> Alle Daten bleiben auf dem Schulserver - keine Cloud.</div>
        </div>
        <div class="lehrer-tip">
          <div class="lehrer-tip-check">✓</div>
          <div class="lehrer-tip-text"><strong>KI-Vorschlaege:</strong> Du hast immer die volle Kontrolle ueber alle Inhalte.</div>
        </div>
        <div class="lehrer-tip">
          <div class="lehrer-tip-check">✓</div>
          <div class="lehrer-tip-text"><strong>Support:</strong> Bei Fragen wende dich an deinen Schuladministrator.</div>
        </div>
      </div>
    </div>

    <!-- Help Footer -->
    <div class="lehrer-help">
      <span class="lehrer-help-text">Brauchst du Hilfe?</span>
      <span class="lehrer-help-link" onclick="loadModule('hilfe')">Dokumentation lesen</span>
      <span class="lehrer-help-text">|</span>
      <span class="lehrer-help-link" onclick="loadModule('admin')">Einstellungen</span>
    </div>
  </div>
  </div><!-- /lehrer-onboarding-container -->
</div>
"""

    @staticmethod
    def get_js() -> str:
        """JavaScript fuer das Lehrer-Onboarding Modul."""
        return """
// =============================================
// LEHRER ONBOARDING MODULE
// =============================================

let lehrerOnboardingInitialized = false;

function loadLehrerOnboardingModule() {
  if (lehrerOnboardingInitialized) {
    console.log('Lehrer Onboarding already initialized');
    return;
  }

  console.log('Initializing Lehrer Onboarding Module...');

  // Track that user has seen onboarding
  localStorage.setItem('bp-onboarding-seen', 'true');

  // Add activity
  if (typeof addActivity === 'function') {
    addActivity('👋', 'Willkommen bei BreakPilot!');
  }

  lehrerOnboardingInitialized = true;
  console.log('Lehrer Onboarding Module initialized');
}

// Check if user should see onboarding on first visit
function checkFirstVisit() {
  const seen = localStorage.getItem('bp-onboarding-seen');
  if (!seen) {
    // First visit - show onboarding instead of dashboard
    console.log('First visit detected - showing onboarding');
    setTimeout(() => {
      if (typeof loadModule === 'function') {
        loadModule('lehrer-onboarding');
      }
    }, 100);
  }
}

// Listen for module activation
window.addEventListener('show-lehrer-onboarding', loadLehrerOnboardingModule);

// Check on page load (deferred)
// document.addEventListener('DOMContentLoaded', checkFirstVisit);
"""