{% extends "base.html" %}
{% from "partials/macros.html" import avatar, badge_chip, nav_icon %}
{% block title %}Optionen · Putzliga{% endblock %}
{% block page_title %}Optionen{% endblock %}
{% block content %}
  <section class="settings-tabs">
    {% for endpoint, label, icon in settings_tabs %}
      <a href="{{ url_for(endpoint) }}" class="settings-tab {% if active_settings_tab == endpoint %}is-active{% endif %}">
        {{ nav_icon(icon) }}
        <span>{{ label }}</span>
      </a>
    {% endfor %}
  </section>

  <section class="two-column">
    <article class="panel">
      <p class="eyebrow">Profil & Benachrichtigungen</p>
      <h2>Persönliche Einstellungen</h2>
      <form method="post" enctype="multipart/form-data" class="form-grid">
        {{ form.hidden_tag() }}
        <div class="field">
          {{ form.name.label }}
          {{ form.name() }}
          {% for error in form.name.errors %}<small class="error">{{ error }}</small>{% endfor %}
        </div>
        <div class="field">
          {{ form.email.label }}
          {{ form.email() }}
          {% for error in form.email.errors %}<small class="error">{{ error }}</small>{% endfor %}
        </div>
        <div class="field">
          {{ form.password.label }}
          {{ form.password(placeholder="Leer lassen, wenn nichts geändert werden soll") }}
          {% for error in form.password.errors %}<small class="error">{{ error }}</small>{% endfor %}
        </div>
        <div class="field">
          {{ form.avatar.label }}
          {{ form.avatar() }}
          {% for error in form.avatar.errors %}<small class="error">{{ error }}</small>{% endfor %}
        </div>
        <label class="checkbox">
          {{ form.notification_task_due_enabled() }}
          <span>Push für heute oder morgen fällige Aufgaben</span>
        </label>
        <label class="checkbox">
          {{ form.notification_monthly_winner_enabled() }}
          <span>Push zum Monatssieger am 1. um 09:00 Uhr</span>
        </label>
        {{ form.submit(class_='button') }}
      </form>
    </article>

    <article class="panel">
      <p class="eyebrow">Push & App-Install</p>
      <h2>Web-Push vorbereiten</h2>
      <p class="muted">Putzliga nutzt echten Web-Push mit Service Worker und gespeicherten Subscriptions. Auf iPhone funktioniert das nur, wenn die App zum Home-Bildschirm hinzugefügt wurde.</p>
      <div class="push-box">
        <div class="push-box__state {% if push_ready %}is-ready{% else %}is-disabled{% endif %}">
          {{ nav_icon('bell') }}
          <div>
            <strong>{% if push_ready %}VAPID konfiguriert{% else %}VAPID fehlt{% endif %}</strong>
            <p>{% if push_ready %}Push kann im Browser aktiviert werden.{% else %}Bitte zuerst Public/Private Key in der Umgebung setzen.{% endif %}</p>
          </div>
        </div>
        <button
          type="button"
          class="button button--wide"
          id="pushToggle"
          {% if not push_ready %}disabled{% endif %}
          data-subscribed="{{ '1' if has_subscription else '0' }}"
        >
          {% if has_subscription %}Push deaktivieren{% else %}Push aktivieren{% endif %}
        </button>
        <p class="inline-note" id="pushHint">
          Auf iPhone/iPad bitte zuerst in Safari zum Home-Bildschirm hinzufügen und als Web-App öffnen.
        </p>
      </div>
    </article>
  </section>

  <section class="panel">
    <p class="eyebrow">Deine Trophäenwand</p>
    <h2>Freigeschaltete Badges</h2>
    {% if earned_badges %}
      <div class="earned-badges-grid">
        {% for badge in earned_badges %}
          {{ badge_chip(badge) }}
        {% endfor %}
      </div>
    {% else %}
      <p class="muted">Noch keine Badges freigeschaltet. Die ersten kommen schnell, sobald Aufgaben erledigt werden.</p>
    {% endif %}
    {% if current_user.is_admin %}
      <p class="inline-note">Badge-Regeln verwaltest du auf der separaten <a href="{{ url_for('settings.badges') }}">Badge-Seite</a>.</p>
    {% endif %}
  </section>

  <section class="panel">
    <p class="eyebrow">Kalender-Abo</p>
    <h2>Persönlicher ICS-Feed</h2>
    <p class="muted">Dieser Read-only-Link zeigt in externen Kalendern nur Aufgaben an, die dir zugewiesen sind. Exportiert werden nur Titel, Beschreibung und Fälligkeitsdatum.</p>
    <div class="push-box">
      <div class="field">
        <label for="calendarFeedUrl">Persönliche Kalender-URL</label>
        <input id="calendarFeedUrl" type="text" value="{{ calendar_feed_url }}" readonly>
      </div>
      <div class="form-actions">
        <a class="button button--secondary" href="{{ calendar_feed_url }}" target="_blank" rel="noreferrer">ICS öffnen</a>
        <form method="post" action="{{ url_for('settings.regenerate_calendar_feed') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="button button--ghost">Link neu erzeugen</button>
        </form>
      </div>
    </div>
  </section>

  {% if current_user.is_admin %}
    <section class="panel">
      <p class="eyebrow">Admin</p>
      <h2>Nutzerverwaltung</h2>
      <div class="badge-settings">
        <form method="post" action="{{ url_for('settings.create_user') }}" class="badge-setting-card">
          {{ admin_form.hidden_tag() }}
          <div>
            <strong>Neuen Nutzer anlegen</strong>
            <p class="muted">Hier legst du weitere Personen kontrolliert an, ohne freie Registrierung.</p>
          </div>
          <div class="field">
            {{ admin_form.name.label }}
            {{ admin_form.name() }}
          </div>
          <div class="field">
            {{ admin_form.email.label }}
            {{ admin_form.email() }}
          </div>
          <div class="field">
            {{ admin_form.password.label }}
            {{ admin_form.password() }}
          </div>
          <label class="checkbox">
            {{ admin_form.is_admin() }}
            <span>Als Admin anlegen</span>
          </label>
          {{ admin_form.submit(class_='button button--secondary') }}
        </form>
      </div>

      <div class="admin-user-list">
        {% for user in users %}
          <article class="admin-user-card">
            <div class="admin-user-card__identity">
              {{ avatar(user) }}
              <div>
                <strong>{{ user.name }}</strong>
                <p class="muted">{{ user.email }}</p>
              </div>
            </div>
            <div class="chip-row">
              {% if user.is_admin %}
                <span class="reward-chip">Admin</span>
              {% endif %}
              {% if user.id == current_user.id %}
                <span class="point-pill">Du</span>
              {% endif %}
            </div>
            <div class="admin-user-card__actions">
              <form method="post" action="{{ url_for('settings.toggle_admin', user_id=user.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="make_admin" value="{{ 0 if user.is_admin else 1 }}">
                <button type="submit" class="button button--ghost">
                  {% if user.is_admin %}Admin entziehen{% else %}Zum Admin machen{% endif %}
                </button>
              </form>
              <form method="post" action="{{ url_for('settings.delete_user', user_id=user.id) }}" onsubmit="return confirm('Diesen Nutzer wirklich entfernen? Zugewiesene Aufgaben bleiben erhalten, aber ohne Person.')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="button button--secondary" {% if user.id == current_user.id %}disabled{% endif %}>
                  Nutzer löschen
                </button>
              </form>
            </div>
          </article>
        {% endfor %}
      </div>
    </section>

    <section class="panel">
      <p class="eyebrow">Admin</p>
      <h2>Schnellaufgabe-Aufwand</h2>
      <p class="muted">Hier definierst du die sichtbaren Aufwand-Stufen und die dazugehörigen Punkte. Im Schnellaufgaben-Dialog wird nur die Bezeichnung angezeigt.</p>
      <form method="post" action="{{ url_for('settings.update_quick_task_config') }}" class="badge-settings">
        {{ quick_task_config_form.hidden_tag() }}
        <div class="badge-setting-card">
          <div>
            <strong>Slot 1</strong>
            <p class="muted">Kleine Sache für zwischendurch.</p>
          </div>
          <div class="field">
            {{ quick_task_config_form.fast_label.label }}
            {{ quick_task_config_form.fast_label() }}
          </div>
          <div class="field">
            <label for="{{ quick_task_config_form.fast_points.id }}">Punkte</label>
            {{ quick_task_config_form.fast_points() }}
          </div>
        </div>
        <div class="badge-setting-card">
          <div>
            <strong>Slot 2</strong>
            <p class="muted">Typische Alltagssache.</p>
          </div>
          <div class="field">
            {{ quick_task_config_form.normal_label.label }}
            {{ quick_task_config_form.normal_label() }}
          </div>
          <div class="field">
            <label for="{{ quick_task_config_form.normal_points.id }}">Punkte</label>
            {{ quick_task_config_form.normal_points() }}
          </div>
        </div>
        <div class="badge-setting-card">
          <div>
            <strong>Slot 3</strong>
            <p class="muted">Braucht etwas mehr Zeit oder Konzentration.</p>
          </div>
          <div class="field">
            {{ quick_task_config_form.medium_label.label }}
            {{ quick_task_config_form.medium_label() }}
          </div>
          <div class="field">
            <label for="{{ quick_task_config_form.medium_points.id }}">Punkte</label>
            {{ quick_task_config_form.medium_points() }}
          </div>
        </div>
        <div class="badge-setting-card">
          <div>
            <strong>Slot 4</strong>
            <p class="muted">Spürbarer Aufwand mit mehr Punkten.</p>
          </div>
          <div class="field">
            {{ quick_task_config_form.heavy_label.label }}
            {{ quick_task_config_form.heavy_label() }}
          </div>
          <div class="field">
            <label for="{{ quick_task_config_form.heavy_points.id }}">Punkte</label>
            {{ quick_task_config_form.heavy_points() }}
          </div>
        </div>
        <div class="field field--full">
          {{ quick_task_config_form.submit(class_='button button--secondary') }}
        </div>
      </form>
    </section>
  {% endif %}
{% endblock %}