{% extends "base.html" %}

{% block content %}

<div class="row-between" style="margin-bottom:0.25rem;">
  <div>
    <div class="page-title">Configuration</div>
    <div class="page-sub">Edit settings, review overrides, and save. Changes marked ↺ require a restart.</div>
  </div>
</div>

<div class="card">
  <form id="config-form" class="settings-form" data-endpoint="/api/config">

    {# ── Library ─────────────────────────────────────────── #}
    <div class="form-section">
      <div class="section-title">Library</div>

      <div class="form-row-2">
        <div class="form-group">
          <label class="form-label">Scan Roots</label>
          <textarea name="paths" rows="4"
            placeholder="/Volumes/home/Photos">{{ (config.effective.paths or []) | join('\n') }}</textarea>
          <div class="form-hint">One container-visible path per line.</div>
        </div>

        <div class="form-group">
          <label class="form-label">Exclude Patterns</label>
          <textarea name="exclude" rows="4"
            placeholder="**/@eaDir/**">{{ (config.effective.exclude or []) | join('\n') }}</textarea>
          <div class="form-hint">One glob pattern per line.</div>
        </div>
      </div>

      <div class="form-row-2">
        <div class="form-group">
          <label class="form-label">Follow Symlinks</label>
          <select name="follow_symlinks">
            <option value="false" {% if not config.effective.follow_symlinks %}selected{% endif %}>Disabled</option>
            <option value="true"  {% if config.effective.follow_symlinks      %}selected{% endif %}>Enabled</option>
          </select>
        </div>
      </div>
    </div>

    {# ── Performance ─────────────────────────────────────── #}
    <div class="form-section">
      <div class="section-title">Performance</div>
      <div class="form-row-3">
        <div class="form-group">
          <label class="form-label">Workers</label>
          <input type="number" name="workers" value="{{ config.effective.workers }}" min="1" max="64">
          <div class="form-hint">General validation threads.</div>
        </div>

        <div class="form-group">
          <label class="form-label">RAW Workers</label>
          <input type="number" name="raw_workers" value="{{ config.effective.raw_workers }}" min="1" max="32">
          <div class="form-hint">Threads for RAW image decoding.</div>
        </div>

        <div class="form-group">
          <label class="form-label">Validation Timeout (s)</label>
          <input type="number" name="validation_timeout_s" value="{{ config.effective.validation_timeout_s }}" min="5">
        </div>

        <div class="form-group">
          <label class="form-label">Force Recheck (days)</label>
          <input type="number" name="force_recheck_days" value="{{ config.effective.force_recheck_days }}" min="1">
          <div class="form-hint">Re-scan OK files after N days.</div>
        </div>

        <div class="form-group schedule-group">
          <label class="form-label">Schedule</label>
          <div class="schedule-controls">
            <select id="schedule-preset" aria-label="Schedule Preset">
              <option value="">Disabled</option>
              <option value="0 * * * *">Hourly</option>
              <option value="0 */6 * * *">Every 6 hours</option>
              <option value="0 2 * * *">Daily at 2:00 AM</option>
              <option value="0 2 * * 0">Weekly on Sunday at 2:00 AM</option>
              <option value="__custom__">Custom cron…</option>
            </select>
            <input id="schedule-input" type="text" name="schedule" value="{{ config.effective.schedule or '' }}" placeholder="0 2 * * *" spellcheck="false" autocomplete="off" class="mono">
          </div>
          <div class="form-hint" id="schedule-description">Uses 5-field cron syntax: minute hour day-of-month month day-of-week.</div>
          <div class="form-hint">Choose a preset or enter a custom 5-field cron expression. Leave blank to disable automatic scans.</div>
        </div>

        <div class="form-group">
          <label class="form-label">Trigger Cooldown (s)</label>
          <input type="number" name="trigger_cooldown_s" value="{{ config.effective.trigger_cooldown_s }}" min="0">
          <div class="form-hint">Min seconds between scan triggers.</div>
        </div>
      </div>
    </div>

    {# ── Storage ─────────────────────────────────────────── #}
    <div class="form-section">
      <div class="section-title">Storage &amp; Server</div>
      <div class="form-row-2">
        <div class="form-group">
          <label class="form-label">
            Database Path
            {% if config.sources.db_path == 'env' %}<span class="tag-env">env</span>{% endif %}
            {% if 'db_path' in restart_required %}<span class="tag-restart">↺ restart</span>{% endif %}
          </label>
          <input type="text" name="db_path"
            value="{{ config.effective.db_path }}"
            {% if config.sources.db_path == 'env' %}disabled{% endif %}>
        </div>

        <div class="form-group">
          <label class="form-label">
            HTTP Port
            {% if config.sources.http_port == 'env' %}<span class="tag-env">env</span>{% endif %}
            {% if 'http_port' in restart_required %}<span class="tag-restart">↺ restart</span>{% endif %}
          </label>
          <input type="number" name="http_port"
            value="{{ config.effective.http_port }}"
            {% if config.sources.http_port == 'env' %}disabled{% endif %}>
        </div>
      </div>
    </div>

    {# ── Email notifications ──────────────────────────────── #}
    <div class="form-section">
      <div class="section-title">Email Notifications</div>
      <div class="form-row-2">
        <div class="form-group">
          <label class="form-label">Notification Email</label>
          <input type="email" name="notify_email"
            value="{{ config.effective.notify_email or '' }}"
            placeholder="you@example.com">
          <div class="form-hint">Leave empty to disable email alerts.</div>
        </div>

        <div class="form-group">
          <label class="form-label">SMTP Host</label>
          <input type="text" name="smtp_host"
            value="{{ config.effective.smtp_host or '' }}"
            placeholder="smtp.example.com">
        </div>

        <div class="form-group">
          <label class="form-label">SMTP User</label>
          <input type="text" name="smtp_user"
            value="{{ config.effective.smtp_user or '' }}">
        </div>

        <div class="form-group">
          <label class="form-label">SMTP TLS</label>
          <select name="smtp_tls">
            <option value="starttls" {% if config.effective.smtp_tls == 'starttls' %}selected{% endif %}>STARTTLS</option>
            <option value="ssl"      {% if config.effective.smtp_tls == 'ssl'      %}selected{% endif %}>SSL / TLS</option>
            <option value="none"     {% if config.effective.smtp_tls == 'none'     %}selected{% endif %}>None</option>
          </select>
        </div>

        <div class="form-group">
          <label class="form-label">SMTP Port</label>
          <input type="number" name="smtp_port"
            value="{{ config.effective.smtp_port }}"
            placeholder="587">
        </div>
      </div>
    </div>

    {# ── Webhook ─────────────────────────────────────────── #}
    <div class="form-section">
      <div class="section-title">Webhook</div>
      <div class="form-row-2">
        <div class="form-group">
          <label class="form-label">Webhook URL</label>
          <input type="text" name="webhook_url"
            value="{{ config.effective.webhook_url or '' }}"
            placeholder="https://…">
        </div>

        <div class="form-group">
          <label class="form-label">Allow Private Targets</label>
          <select name="webhook_allow_private">
            <option value="false" {% if not config.effective.webhook_allow_private %}selected{% endif %}>Disabled</option>
            <option value="true"  {% if config.effective.webhook_allow_private     %}selected{% endif %}>Enabled</option>
          </select>
          <div class="form-hint">Allow webhooks to LAN/loopback addresses.</div>
        </div>
      </div>
    </div>

    {# ── Actions ─────────────────────────────────────────── #}
    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Save Configuration</button>
      <button type="button" id="test-notify-button" class="btn btn-secondary">Send Test Notification</button>
      <span class="form-feedback" id="config-feedback"></span>
    </div>
  </form>
</div>

{# ── Value sources (collapsed detail) ─────────────────────── #}
<details style="margin-top:0.25rem;">
  <summary style="cursor:pointer; font-size:0.8125rem; color:var(--t3); padding:0.5rem 0;
                  list-style:none; display:flex; align-items:center; gap:0.375rem;">
    <span>▶</span> Value sources &amp; restart requirements
  </summary>
  <div class="card" style="margin-top:0.5rem;">
    <div class="table-wrap">
      <table class="data-table">
        <thead>
          <tr>
            <th>Field</th>
            <th>Source</th>
            <th>Restart Required</th>
          </tr>
        </thead>
        <tbody>
          {% for field, source in config.sources.items() %}
          <tr>
            <td class="mono" style="color:var(--t1);">{{ field }}</td>
            <td>
              {% if source == 'env' %}
                <span class="tag-env">env</span>
              {% elif source == 'env_file' %}
                <span class="tag-env">env file</span>
              {% elif source == 'yaml' %}
                <span class="badge badge-gray">yaml</span>
              {% else %}
                <span class="text-3">{{ source }}</span>
              {% endif %}
            </td>
            <td>
              {% if field in restart_required %}
                <span class="tag-restart">↺ yes</span>
              {% else %}
                <span class="text-3">no</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</details>

{% endblock %}