{% extends "base.html" %}
{% block title %}Settings – Auf Deutsch{% endblock %}

{% block content %}
<div class="page-settings fade-in">
  <h1 class="page-title">Settings</h1>

  {% if saved %}
  <div class="alert alert-success">✓ Settings saved.</div>
  {% endif %}
  {% if reset %}
  <div class="alert alert-warning">✓ All progress has been reset.</div>
  {% endif %}
  {% if regen %}
  <div class="alert alert-success">✓ Audio regeneration started in the background.</div>
  {% endif %}

  <div class="card">
    <h2 class="card-title">Learning</h2>
    <form method="post" action="/settings">

      <div class="form-group">
        <label class="form-label">Daily goal</label>
        <select name="daily_goal" class="form-input">
          <option value="5"  {% if daily_goal == "5"  %}selected{% endif %}>5 min — quick daily habit</option>
          <option value="10" {% if daily_goal == "10" %}selected{% endif %}>10 min — recommended</option>
          <option value="15" {% if daily_goal == "15" %}selected{% endif %}>15 min — deep focus</option>
        </select>
      </div>

      <div class="form-group">
        <label class="form-label">My level</label>
        <select name="level" class="form-input">
          {% for lvl in ["A1","A2","B1","B2"] %}
          <option value="{{ lvl }}" {% if level == lvl %}selected{% endif %}>{{ lvl }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="form-group">
        <label class="form-label">Session button language</label>
        <select name="ui_lang" class="form-input">
          <option value="en" {% if ui_lang == "en" %}selected{% endif %}>English  (Again / Hard / Good / Easy)</option>
          <option value="de" {% if ui_lang == "de" %}selected{% endif %}>Deutsch (Nochmal / Schwer / Gut / Leicht)</option>
        </select>
      </div>

      <div class="settings-divider"></div>
      <h2 class="card-title">Reminders</h2>

      <div class="form-group">
        <label class="form-label">Daily reminder time</label>
        <input type="time" name="reminder_time" value="{{ reminder_time }}" class="form-input">
      </div>

      <div class="form-group">
        <label class="form-label">Browser notifications</label>
        <select name="notifications_enabled" class="form-input" id="notif-select">
          <option value="true"  {% if notifications_enabled == "true"  %}selected{% endif %}>Enabled</option>
          <option value="false" {% if notifications_enabled != "true" %}selected{% endif %}>Disabled</option>
        </select>
        <p class="form-hint" id="notif-hint" {% if notifications_enabled != "true" %}hidden{% endif %}>
          Your browser will ask for permission once you save.
        </p>
      </div>

      <div class="settings-tip-box">
        <div class="dashboard-kicker">Consistency tip</div>
        <p>{{ habit_hint }}</p>
        <p class="muted">Current weekly target: {{ weekly_snapshot.target_days }} study days.</p>
      </div>

      <button type="submit" class="btn btn-primary btn-full">Save Settings</button>
    </form>
  </div>

  <div class="card">
    <h2 class="card-title">Consistency</h2>
    <div class="consistency-topline">
      <div class="consistency-big">{{ weekly_snapshot.active_days }}/{{ weekly_snapshot.target_days }}</div>
      <div class="consistency-copy">
        <strong>{{ weekly_snapshot.status }}</strong>
        <span>{{ weekly_snapshot.minutes }} minutes across the last 7 days.</span>
      </div>
    </div>
    <div class="progress-bar progress-bar-large">
      <div class="progress-fill" style="width: {{ weekly_snapshot.pct }}%"></div>
    </div>
    <p class="consistency-note">Keep the reminder time anchored to a moment that already happens every day.</p>
  </div>

  <div class="card">
    <h2 class="card-title">Data</h2>

    <div class="settings-action-row">
      <div class="settings-action-info">
        <div class="settings-action-label">Export progress</div>
        <div class="settings-action-desc">Download all your SRS data as a CSV file.</div>
      </div>
      <a href="/settings/export-progress" class="btn btn-secondary">Export CSV</a>
    </div>

    <div class="settings-action-row">
      <div class="settings-action-info">
        <div class="settings-action-label">Regenerate audio</div>
        <div class="settings-action-desc">Re-download all German audio from gTTS. Runs in background.</div>
      </div>
      <form method="post" action="/settings/regenerate-audio">
        <button type="submit" class="btn btn-secondary">Regenerate</button>
      </form>
    </div>

    <div class="settings-action-row settings-action-danger">
      <div class="settings-action-info">
        <div class="settings-action-label">Reset all progress</div>
        <div class="settings-action-desc">Permanently delete all phrase progress and session history.</div>
      </div>
      <form method="post" action="/settings/reset-progress"
            onsubmit="return confirm('Delete ALL progress? This cannot be undone.')">
        <button type="submit" class="btn btn-danger">Reset</button>
      </form>
    </div>
  </div>

  <p class="settings-version muted">Auf Deutsch · local-first · v1.0</p>
</div>
{% endblock %}

{% block scripts %}
<script>
  const sel = document.getElementById("notif-select");
  const hint = document.getElementById("notif-hint");
  if (sel && hint) {
    sel.addEventListener("change", () => {
      hint.hidden = sel.value !== "true";
      if (sel.value === "true" && "Notification" in window) {
        Notification.requestPermission();
      }
    });
  }
</script>
{% endblock %}