{% extends "base.html" %}
{% block title %}Settings — devcoach{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold mb-6 text-indigo-600 dark:text-indigo-400">Settings</h1>

{% if imported is not none %}
<div class="mb-4 px-4 py-2 rounded-lg border text-sm
            {% if invalid %}
              bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-700 text-yellow-800 dark:text-yellow-300
            {% else %}
              bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-700 text-green-700 dark:text-green-300
            {% endif %}">
  {{ imported }} lesson{{ 's' if imported != 1 }} imported.
  {%- if skipped %} {{ skipped }} skipped (already in DB).{% endif %}
  {%- if invalid %} {{ invalid }} rejected (failed validation).{% endif %}
  {%- if groups is not none %} {{ groups }} group{{ 's' if groups != 1 }} added.{% endif %}
  {%- if notebook %} Notebook restored.{% endif %}
</div>
{% endif %}

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

  <!-- Coaching settings -->
  <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-6">
    <p class="text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500 mb-5">Coaching</p>

    <form method="post" action="/settings" class="space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label for="max-per-day" class="block text-sm text-gray-600 dark:text-gray-400 mb-1">Max lessons per day</label>
          <input
            id="max-per-day" type="number" name="max_per_day" min="1" max="20"
            value="{{ settings.max_per_day }}"
            class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white rounded px-3 py-2 text-sm focus:outline-none focus:border-indigo-500"
          />
          <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Lessons in a 24h window.</p>
        </div>

        <div>
          <label for="min-gap-minutes" class="block text-sm text-gray-600 dark:text-gray-400 mb-1">Minimum gap between lessons</label>
          <select id="min-gap-minutes" name="min_gap_minutes"
                  class="w-full bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white rounded px-3 py-2 text-sm focus:outline-none focus:border-indigo-500">
            {% set gap = settings.min_gap_minutes %}
            <option value="0"    {% if gap == 0    %}selected{% endif %}>No cooldown</option>
            <option value="15"   {% if gap == 15   %}selected{% endif %}>15 minutes</option>
            <option value="30"   {% if gap == 30   %}selected{% endif %}>30 minutes</option>
            <option value="60"   {% if gap == 60   %}selected{% endif %}>1 hour</option>
            <option value="90"   {% if gap == 90   %}selected{% endif %}>1 hour 30 min</option>
            <option value="120"  {% if gap == 120  %}selected{% endif %}>2 hours</option>
            <option value="180"  {% if gap == 180  %}selected{% endif %}>3 hours</option>
            <option value="240"  {% if gap == 240  %}selected{% endif %}>4 hours</option>
            <option value="360"  {% if gap == 360  %}selected{% endif %}>6 hours</option>
            <option value="480"  {% if gap == 480  %}selected{% endif %}>8 hours</option>
            <option value="720"  {% if gap == 720  %}selected{% endif %}>12 hours</option>
            <option value="1440" {% if gap == 1440 %}selected{% endif %}>24 hours</option>
          </select>
          <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Minimum gap between lessons.</p>
        </div>
      </div>

      <fieldset class="border-0 p-0 m-0">
        <legend class="block text-sm text-gray-600 dark:text-gray-400 mb-1">UI theme</legend>
        <div class="flex gap-2">
          {% for value, label, icon in [("system", "System", "🌓"), ("light", "Light", "☀️"), ("dark", "Dark", "🌙")] %}
          <label class="flex-1 cursor-pointer">
            <input type="radio" name="ui_theme" value="{{ value }}"
                   {% if settings.ui_theme == value %}checked{% endif %}
                   class="sr-only peer" />
            <span class="flex flex-col items-center justify-center gap-1 px-3 py-2 rounded border
                         border-gray-300 dark:border-gray-700
                         peer-checked:border-indigo-500 peer-checked:bg-indigo-50 dark:peer-checked:bg-indigo-900/30
                         peer-checked:text-indigo-700 dark:peer-checked:text-indigo-300
                         text-gray-500 dark:text-gray-400 text-xs font-medium transition select-none">
              <span class="text-base leading-none">{{ icon }}</span>
              {{ label }}
            </span>
          </label>
          {% endfor %}
        </div>
        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">System follows your OS preference.</p>
      </fieldset>

      <button type="submit"
              class="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded px-4 py-2 text-sm transition">
        Save settings
      </button>
    </form>
  </div>

  <!-- Backup & Restore -->
  <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-6">
    <p class="text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500 mb-5">Backup &amp; Restore</p>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

      <!-- Export full backup -->
      <div class="flex flex-col gap-1">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Full backup</p>
        <p class="text-xs text-gray-400 dark:text-gray-500">Settings + knowledge map + lessons + coaching notebook as a zip file.</p>
        <a href="/settings/export"
           class="mt-auto inline-flex items-center justify-center gap-1.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 font-medium rounded px-4 py-2 text-sm transition">
          ↓ Download backup
        </a>
      </div>

      <!-- Restore from backup -->
      <div class="flex flex-col gap-1">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Restore backup</p>
        <p class="text-xs text-gray-400 dark:text-gray-500">Overwrites settings, knowledge map &amp; coaching notebook; duplicate lessons are skipped.</p>
        <form id="form-restore" method="post" action="/settings/import" enctype="multipart/form-data" class="mt-auto flex flex-col gap-2">
          <input id="file-restore" type="file" name="file" accept=".zip,.json" class="hidden" onchange="updateLabel('file-restore','label-restore','restore-submit')" />
          <label id="label-restore" for="file-restore"
                 class="cursor-pointer inline-flex items-center justify-center gap-1.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 font-medium rounded px-4 py-2 text-sm transition truncate">
            Choose file…
          </label>
          <button id="restore-submit" type="submit" disabled
                  class="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed text-white font-medium rounded px-4 py-2 text-sm transition">
            Restore
          </button>
        </form>
      </div>

      <!-- Export lessons only -->
      <div class="flex flex-col gap-1">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Lessons only</p>
        <p class="text-xs text-gray-400 dark:text-gray-500">Export just the lesson log as JSON (no settings).</p>
        <a href="/lessons/export"
           class="mt-auto inline-flex items-center justify-center gap-1.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 font-medium rounded px-4 py-2 text-sm transition">
          ↓ Download lessons
        </a>
      </div>

      <!-- Import lessons only -->
      <div class="flex flex-col gap-1">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Import lessons</p>
        <p class="text-xs text-gray-400 dark:text-gray-500">Merge a lessons JSON file; duplicates are skipped.</p>
        <form id="form-import" method="post" action="/lessons/import" enctype="multipart/form-data" class="mt-auto flex flex-col gap-2">
          <input id="file-import" type="file" name="file" accept=".json" class="hidden" onchange="updateLabel('file-import','label-import','import-submit')" />
          <label id="label-import" for="file-import"
                 class="cursor-pointer inline-flex items-center justify-center gap-1.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 font-medium rounded px-4 py-2 text-sm transition truncate">
            Choose file…
          </label>
          <button id="import-submit" type="submit" disabled
                  class="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed text-white font-medium rounded px-4 py-2 text-sm transition">
            Import
          </button>
        </form>
      </div>

    </div>
  </div>


  <!-- Coaching Notebook -->
  <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-6 lg:col-span-2"
       x-data="{ nbMode: 'preview' }">
    <div class="flex flex-wrap items-center justify-between gap-2 mb-4">
      <p class="text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">Coaching Notebook</p>
      <div class="flex items-center gap-2">
        <div class="flex rounded border border-gray-200 dark:border-gray-700 overflow-hidden text-xs font-medium">
          <button type="button" @click="nbMode = 'preview'"
                  :class="nbMode === 'preview' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'"
                  class="px-3 py-1.5 transition">Preview</button>
          <button type="button" @click="nbMode = 'source'"
                  :class="nbMode === 'source' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'"
                  class="px-3 py-1.5 transition border-l border-gray-200 dark:border-gray-700">Source</button>
        </div>
        <a href="/settings/notebook/download"
           class="inline-flex items-center gap-1.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 font-medium rounded px-3 py-1.5 text-xs transition">
          ↓ Download
        </a>
        <a href="vscode://file/{{ notebook_path }}"
           title="Open in VS Code"
           class="inline-flex items-center gap-1.5 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 font-medium rounded px-3 py-1.5 text-xs transition">
          <img src="/static/vscode.svg" class="w-4 h-4" alt="VS Code" />
          Open in VS Code
        </a>
      </div>
    </div>
    <div x-show="nbMode === 'preview'" id="notebook-preview-settings" class="markdown-body min-h-24"></div>
    <pre x-show="nbMode === 'source'" style="display:none"
         class="text-xs font-mono bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded p-3 overflow-x-auto whitespace-pre-wrap text-gray-700 dark:text-gray-200 min-h-24">{{ notebook_content | e }}</pre>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script src="/static/vendor/marked.min.js"></script>
<script>
function updateLabel(inputId, labelId, submitId) {
  var input = document.getElementById(inputId);
  var label = document.getElementById(labelId);
  var btn   = document.getElementById(submitId);
  label.textContent = input.files.length ? input.files[0].name : 'Choose file…';
  btn.disabled = !input.files.length;
}
marked.setOptions({ breaks: true, gfm: true });
document.getElementById('notebook-preview-settings').innerHTML = marked.parse({{ notebook_content | tojson }});
</script>
{% endblock %}