// Hauptanwendung
class SportAnmeldungApp {
  constructor() {
    this.kurse = [];
    this.betriebe = [];
    this.user = null;
    this.init();
  }

  async init() {
    this.setupThemeToggle();
    this.setupNavigation();
    this.setupTabs();
    this.setupLoginHandlers();
    this.setupLogoutHandler();

    await this.checkAuthAndToggleUI();

    await this.loadInitialData();
    this.setupFormHandlers();
  }

  setupThemeToggle() {
    const toggle = document.getElementById('theme-toggle');
    const icon = toggle.querySelector('.theme-icon');

    const savedTheme = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-theme', savedTheme);
    icon.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
    toggle.setAttribute('aria-pressed', savedTheme === 'dark' ? 'true' : 'false');

    toggle.addEventListener('click', () => {
      const currentTheme = document.documentElement.getAttribute('data-theme');
      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
      document.documentElement.setAttribute('data-theme', newTheme);
      localStorage.setItem('theme', newTheme);
      icon.textContent = newTheme === 'dark' ? '☀️' : '🌙';
      toggle.setAttribute('aria-pressed', newTheme === 'dark' ? 'true' : 'false');
    });
  }

  setupNavigation() {
    const navButtons = document.querySelectorAll('.nav-btn');
    navButtons.forEach((btn) => {
      btn.addEventListener('click', (e) => {
        const view = e.target.dataset.view;
        this.switchView(view);
      });
    });
  }

  switchView(viewName) {
    document.querySelectorAll('.view').forEach((v) => v.classList.remove('active'));
    document.querySelectorAll('.nav-btn').forEach((b) => b.classList.remove('active'));

    const view = document.getElementById(`${viewName}-view`);
    if (view) view.classList.add('active');
    document.querySelector(`[data-view="${viewName}"]`)?.classList.add('active');

    if (viewName === 'berichte') {
      this.loadBerichte();
    } else if (viewName === 'rechnungen') {
      this.loadRechnungsOptionen();
    }
  }

  setupTabs() {
    const tabButtons = document.querySelectorAll('.tab-btn');
    tabButtons.forEach((btn) => {
      btn.addEventListener('click', (e) => {
        const tab = e.target.dataset.tab;
        this.switchTab(tab);
      });
    });
  }

  switchTab(tabName) {
    document.querySelectorAll('.tab-content').forEach((t) => t.classList.remove('active'));
    document.querySelectorAll('.tab-btn').forEach((b) => b.classList.remove('active'));

    document.getElementById(`${tabName}-tab`).classList.add('active');
    document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
  }

  async checkAuthAndToggleUI() {
    try {
      const me = await API.me();
      this.user = me.authenticated ? me.user : null;

      const isAdmin = !!this.user && this.user.role === 'admin';
      document.querySelectorAll('.admin-only').forEach((el) => {
        el.classList.toggle('hidden', !isAdmin);
      });

      document.getElementById('logout-btn').classList.toggle('hidden', !this.user);
      document.getElementById('login-tab-btn').classList.toggle('hidden', !!this.user);

      // Wenn aktuell Berichte/Rechnungen aktiv sind, aber nicht admin → auf Anmeldung umschalten
      const activeView = document.querySelector('.view.active')?.id || '';
      if (!isAdmin && (activeView === 'berichte-view' || activeView === 'rechnungen-view')) {
        this.switchView('login');
      }
    } catch (e) {
      this.user = null;
      document.querySelectorAll('.admin-only').forEach((el) => el.classList.add('hidden'));
      document.getElementById('logout-btn').classList.add('hidden');
      document.getElementById('login-tab-btn').classList.remove('hidden');
    }
  }

  async loadInitialData() {
    try {
      this.kurse = await API.getKurse();
      this.betriebe = await API.getBetriebe();
      this.renderKurse();
      this.renderBetriebe();
    } catch (error) {
      console.error('Fehler beim Laden der Daten:', error);
      alert('Fehler beim Laden der Daten. Bitte überprüfen Sie die API-Verbindung.');
    }
  }

  renderKurse() {
    const container = document.getElementById('kurse-container');
    container.innerHTML = this.kurse
      .map(
        (kurs) => `
            <div class="kurs-card ${!kurs.verfuegbar ? 'voll' : ''}" data-kurs-id="${kurs.id}" ${
          !kurs.verfuegbar ? 'aria-disabled="true" style="pointer-events:none;opacity:0.6"' : ''
        }>
                <label>
                    <input type="checkbox" name="kurse" value="${kurs.id}" ${
          !kurs.verfuegbar ? 'disabled' : ''
        }>
                    <strong>${kurs.name}</strong>
                </label>
                <div class="kurs-info">
                    <p>${kurs.beschreibung ?? ''}</p>
                    <p><strong>Gebühr:</strong> ${kurs.gebuehr}€</p>
                    <p><strong>Verfügbar:</strong> ${kurs.freie_plaetze} von ${
          kurs.max_teilnehmer
        } Plätzen</p>
                    ${
                      !kurs.verfuegbar
                        ? '<p style="color: var(--danger);"><strong>Kurs ist voll!</strong></p>'
                        : ''
                    }
                </div>
            </div>
        `
      )
      .join('');

    document.querySelectorAll('.kurs-card').forEach((card) => {
      const checkbox = card.querySelector('input[type="checkbox"]');
      if (checkbox && !checkbox.disabled) {
        card.addEventListener('click', (e) => {
          if (e.target.tagName !== 'INPUT') {
            checkbox.checked = !checkbox.checked;
            card.classList.toggle('selected', checkbox.checked);
          }
        });
        checkbox.addEventListener('change', () => {
          card.classList.toggle('selected', checkbox.checked);
        });
      }
    });
  }

  renderBetriebe() {
    const select = document.getElementById('betrieb');
    const rechnungSelect = document.getElementById('rechnung-betrieb');

    const options = this.betriebe
      .map((betrieb) => `<option value="${betrieb.id}">${betrieb.name}</option>`)
      .join('');

    select.innerHTML = '<option value="">Bitte wählen...</option>' + options;
    rechnungSelect.innerHTML = '<option value="">Bitte wählen...</option>' + options;
  }

  setupFormHandlers() {
    const form = document.getElementById('anmelde-form');
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      this.handleAnmeldung();
    });

    const rechnungBtn = document.getElementById('rechnung-erstellen');
    rechnungBtn.addEventListener('click', () => {
      this.handleRechnungErstellen();
    });

    document.getElementById('neu-anmelden')?.addEventListener('click', () => {
      document.getElementById('erfolg-meldung').classList.add('hidden');
      form.reset();
      document.querySelectorAll('.kurs-card').forEach((c) => c.classList.remove('selected'));
    });

    document.getElementById('zur-uebersicht')?.addEventListener('click', () => {
      this.switchView('berichte');
    });
  }

  setupLoginHandlers() {
    const form = document.getElementById('login-form');
    if (!form) return;
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const email = document.getElementById('login-email').value.trim();
      const password = document.getElementById('login-password').value;
      const err = document.getElementById('login-error');
      err.textContent = '';
      try {
        await API.login(email, password);
        await this.checkAuthAndToggleUI();
        this.switchView('berichte');
      } catch (ex) {
        err.textContent = ex.message || 'Login fehlgeschlagen';
      }
    });
  }

  setupLogoutHandler() {
    const btn = document.getElementById('logout-btn');
    btn.addEventListener('click', async () => {
      try {
        await API.logout();
        this.user = null;
        await this.checkAuthAndToggleUI();
        this.switchView('anmeldung');
      } catch (e) {
        console.error(e);
      }
    });
  }

  async handleAnmeldung() {
    const form = document.getElementById('anmelde-form');
    const formData = new FormData(form);

    const selectedKurse = Array.from(document.querySelectorAll('input[name="kurse"]:checked')).map(
      (cb) => parseInt(cb.value, 10)
    );

    if (selectedKurse.length === 0) {
      this.showFehler('Bitte wählen Sie mindestens eine Sportart aus.');
      return;
    }

    const data = {
      vorname: formData.get('vorname'),
      nachname: formData.get('nachname'),
      email: formData.get('email'),
      geburtsdatum: formData.get('geburtsdatum') || null,
      betrieb_id: parseInt(formData.get('betrieb'), 10),
      kurs_ids: selectedKurse,
    };

    try {
      const response = await API.anmelden(data);
      this.showErfolg(response);
      form.reset();
      document.querySelectorAll('.kurs-card').forEach((c) => c.classList.remove('selected'));
      await this.loadInitialData();
    } catch (error) {
      this.showFehler(error.message);
    }
  }

  showErfolg(response) {
    const meldung = document.getElementById('erfolg-meldung');
    const text = document.getElementById('erfolg-text');
    text.innerHTML = `
      Vielen Dank für Ihre Anmeldung!<br><br>
      <strong>Angemeldete Kurse:</strong><br>
      ${response.angemeldete_kurse.map((k) => `• ${k}`).join('<br>')}
    `;
    meldung.classList.remove('hidden');
    document.getElementById('fehler-meldung').classList.add('hidden');
    meldung.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    setTimeout(() => {
      meldung.classList.add('hidden');
    }, 8000);
  }

  showFehler(message) {
    const meldung = document.getElementById('fehler-meldung');
    const text = document.getElementById('fehler-text');
    text.textContent = message;
    meldung.classList.remove('hidden');
    document.getElementById('erfolg-meldung').classList.add('hidden');
    meldung.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }

  async loadBerichte() {
    await this.loadBerichtBetrieb();
    await this.loadBerichtKurs();
  }

  async loadBerichtBetrieb() {
    try {
      const bericht = await API.getBerichtBetrieb();
      const container = document.getElementById('betrieb-bericht');

      container.innerHTML = `
        <table class="bericht-table">
          <thead>
            <tr>
              <th>Betrieb</th>
              <th>Anzahl Schüler</th>
              <th>Anmeldungen</th>
              <th>Details</th>
            </tr>
          </thead>
          <tbody>
            ${bericht
              .map(
                (b) => `
              <tr>
                <td>
                  <strong>${b.betrieb_name}</strong><br>
                  <small>${b.adresse}</small>
                </td>
                <td>${b.anzahl_schueler}</td>
                <td>${b.anzahl_anmeldungen}</td>
                <td>
                  ${
                    b.schueler.length > 0
                      ? `
                    <ul class="detail-liste">
                      ${b.schueler
                        .map((s) => `<li>${s.vorname} ${s.nachname} - ${s.angemeldete_kurse}</li>`)
                        .join('')}
                    </ul>
                  `
                      : 'Keine Anmeldungen'
                  }
                </td>
              </tr>
            `
              )
              .join('')}
          </tbody>
        </table>
      `;
    } catch (error) {
      console.error('Fehler beim Laden des Berichts:', error);
      document.getElementById('betrieb-bericht').innerHTML =
        '<div class="meldung fehler">Fehler beim Laden der Berichte</div>';
      if (error.message.includes('Nicht angemeldet') || error.message.includes('Zugriff')) {
        this.switchView('login');
      }
    }
  }

  async loadBerichtKurs() {
    try {
      const bericht = await API.getBerichtKurs();
      const container = document.getElementById('kurs-bericht');

      container.innerHTML = `
        <table class="bericht-table">
          <thead>
            <tr>
              <th>Kurs</th>
              <th>Teilnehmer</th>
              <th>Auslastung</th>
              <th>Details</th>
            </tr>
          </thead>
          <tbody>
            ${bericht
              .map(
                (k) => `
              <tr>
                <td><strong>${k.kurs_name}</strong></td>
                <td>${k.anzahl_teilnehmer} / ${k.max_teilnehmer}</td>
                <td>
                  <div style="background: var(--border); border-radius: 10px; overflow: hidden;">
                    <div style="width: ${k.auslastung_prozent}%; background: var(--primary); padding: 5px; color: white; text-align: center; min-width: 20px;">
                      ${k.auslastung_prozent}%
                    </div>
                  </div>
                </td>
                <td>
                  ${
                    k.teilnehmer.length > 0
                      ? `
                    <ul class="detail-liste">
                      ${k.teilnehmer
                        .map((t) => `<li>${t.vorname} ${t.nachname} (${t.betrieb_name})</li>`)
                        .join('')}
                    </ul>
                  `
                      : 'Keine Anmeldungen'
                  }
                </td>
              </tr>
            `
              )
              .join('')}
          </tbody>
        </table>
      `;
    } catch (error) {
      console.error('Fehler beim Laden des Berichts:', error);
      document.getElementById('kurs-bericht').innerHTML =
        '<div class="meldung fehler">Fehler beim Laden der Berichte</div>';
      if (error.message.includes('Nicht angemeldet') || error.message.includes('Zugriff')) {
        this.switchView('login');
      }
    }
  }

  async loadRechnungsOptionen() {
    // Betriebe werden bereits geladen
  }

  async handleRechnungErstellen() {
    const betriebId = document.getElementById('rechnung-betrieb').value;
    if (!betriebId) {
      alert('Bitte wählen Sie einen Betrieb aus.');
      return;
    }
    try {
      const rechnung = await API.getRechnung(betriebId);
      this.renderRechnung(rechnung);
    } catch (error) {
      console.error('Fehler beim Erstellen der Rechnung:', error);
      alert('Fehler beim Erstellen der Rechnung: ' + error.message);
      if (error.message.includes('Nicht angemeldet') || error.message.includes('Zugriff')) {
        this.switchView('login');
      }
    }
  }

  renderRechnung(rechnung) {
    const container = document.getElementById('rechnung-container');
    container.innerHTML = `
      <div class="rechnung">
        <div class="rechnung-header">
          <div>
            <h3>RECHNUNG</h3>
            <p><strong>Rechnungsnummer:</strong> ${rechnung.rechnungsnummer}</p>
            <p><strong>Datum:</strong> ${new Date(rechnung.datum).toLocaleDateString('de-DE')}</p>
          </div>
          <div>
            <h4>Schulverwaltung</h4>
            <p>Musterstraße 123</p>
            <p>12345 Musterstadt</p>
          </div>
        </div>

        <div>
          <h4>Rechnungsempfänger:</h4>
          <p><strong>${rechnung.betrieb.name}</strong></p>
          <p>${rechnung.betrieb.adresse}</p>
          <p>${rechnung.betrieb.email}</p>
        </div>

        <h4 style="margin-top: 30px;">Kursanmeldungen:</h4>
        <table class="rechnung-table">
          <thead>
            <tr>
              <th>Kurs</th>
              <th>Anzahl Teilnehmer</th>
              <th>Gebühr pro Teilnehmer</th>
              <th>Gesamt</th>
            </tr>
          </thead>
          <tbody>
            ${rechnung.zusammenfassung
              .map(
                (z) => `
              <tr>
                <td>${z.kurs_name}</td>
                <td>${z.anzahl_teilnehmer}</td>
                <td>${z.gebuehr}€</td>
                <td>${z.gesamt_kurs}€</td>
              </tr>
            `
              )
              .join('')}
          </tbody>
        </table>

        <div class="rechnung-summe">
          <div>Netto: ${rechnung.netto.toFixed(2)}€</div>
          <div>MwSt. (${rechnung.mwst_satz}%): ${rechnung.mwst_betrag.toFixed(2)}€</div>
          <div class="gesamt">Gesamt: ${rechnung.gesamtsumme.toFixed(2)}€</div>
        </div>

        <p style="margin-top: 30px; font-size: 0.9em; color: var(--text-secondary);">
          Bitte überweisen Sie den Betrag innerhalb von 14 Tagen unter Angabe der Rechnungsnummer.
        </p>

        <button class="btn-primary" onclick="window.print()" style="margin-top: 20px;">Rechnung drucken</button>
      </div>
    `;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  new SportAnmeldungApp();
});