{% extends "base.html" %}

{% block content %}

<div class="row-between" style="margin-bottom:0.25rem;">
  <div>
    <div class="page-title">Setup</div>
    <div class="page-sub">Verify configuration paths and runtime dependencies before scanning.</div>
  </div>
</div>

{# ── Warnings ─────────────────────────────────────────────── #}
<div id="setup-warnings" {% if not setup.warnings %}style="display:none;"{% endif %}>
  {% if setup.warnings %}
  <div class="alert alert-amber">
    <span style="flex-shrink:0;">⚠</span>
    <div>
      <strong>{{ setup.warnings | length }} warning{{ 's' if setup.warnings | length != 1 else '' }} detected</strong>
      <ul class="alert-list">
        {% for w in setup.warnings %}
        <li>{{ w }}</li>
        {% endfor %}
      </ul>
    </div>
  </div>
  {% endif %}
</div>

{# ── System checks ────────────────────────────────────────── #}
<div class="grid-2">
  {# Config file #}
  <div class="card">
    <div class="card-label">Config File</div>
    <div class="diag-row">
      <div class="diag-icon {% if setup.config.exists %}ok{% else %}error{% endif %}">
        {% if setup.config.exists %}✓{% else %}✗{% endif %}
      </div>
      <div>
        <div class="diag-name">{{ "Found" if setup.config.exists else "Not found" }}</div>
        <div class="diag-value">{{ setup.config.path or "not detected" }}</div>
      </div>
    </div>
    <div class="diag-row">
      <div class="diag-icon {% if setup.config.parent_writable %}ok{% else %}warn{% endif %}">
        {% if setup.config.parent_writable %}✓{% else %}!{% endif %}
      </div>
      <div>
        <div class="diag-name">Directory {{ "writable" if setup.config.parent_writable else "not writable" }}</div>
      </div>
    </div>
  </div>

  {# Database #}
  <div class="card">
    <div class="card-label">Database</div>
    <div class="diag-row">
      <div class="diag-icon {% if setup.db.parent_exists %}ok{% else %}error{% endif %}">
        {% if setup.db.parent_exists %}✓{% else %}✗{% endif %}
      </div>
      <div>
        <div class="diag-name">Directory {{ "exists" if setup.db.parent_exists else "missing" }}</div>
        <div class="diag-value">{{ setup.db.path or "not configured" }}</div>
      </div>
    </div>
    <div class="diag-row">
      <div class="diag-icon {% if setup.db.parent_writable %}ok{% else %}warn{% endif %}">
        {% if setup.db.parent_writable %}✓{% else %}!{% endif %}
      </div>
      <div>
        <div class="diag-name">Directory {{ "writable" if setup.db.parent_writable else "not writable" }}</div>
      </div>
    </div>
  </div>
</div>

{# ── Scan roots ───────────────────────────────────────────── #}
<div class="card">
  <div class="card-label">Scan Roots</div>
  <div id="setup-scan-roots-list">
    {% if setup.scan_roots %}
      {% for root in setup.scan_roots %}
      {% set all_ok = root.exists and root.is_dir and root.readable %}
      <div class="diag-row">
        <div class="diag-icon {% if all_ok %}ok{% elif root.exists %}warn{% else %}error{% endif %}">
          {% if all_ok %}✓{% elif root.exists %}!{% else %}✗{% endif %}
        </div>
        <div>
          <div class="diag-name mono" style="font-size:0.8125rem;">{{ root.path }}</div>
          <div class="row" style="gap:0.5rem; margin-top:3px;">
            {% if not root.exists %}
              <span class="badge badge-red">not found</span>
            {% elif not root.is_dir %}
              <span class="badge badge-amber">not a directory</span>
            {% elif not root.readable %}
              <span class="badge badge-amber">not readable</span>
            {% else %}
              <span class="badge badge-green">accessible</span>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    {% else %}
    <div class="text-3" style="font-size:0.8125rem; padding:0.5rem 0;">No scan roots configured yet.</div>
    {% endif %}
  </div>
</div>

{# ── First-run configuration form ─────────────────────────── #}
<div class="card">
  <div class="card-label" style="margin-bottom:1rem;">Quick Configuration</div>
  <form id="setup-form" class="settings-form" data-endpoint="/api/config">
    <div class="form-section">
      <div class="form-row-2">
        <div class="form-group" style="grid-column: 1 / -1;">
          <label class="form-label" for="f-paths">Scan Roots</label>
          <textarea id="f-paths" name="paths" rows="3"
            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" for="f-db">Database Path</label>
          <input id="f-db" type="text" name="db_path"
            value="{{ config.effective.db_path }}"
            placeholder="/data/state/state.db">
        </div>

        <div class="form-group">
          <label class="form-label" for="f-workers">Workers</label>
          <input id="f-workers" type="number" name="workers"
            value="{{ config.effective.workers }}" min="1" max="32">
        </div>

        <div class="form-group">
          <label class="form-label" for="f-raw">RAW Workers</label>
          <input id="f-raw" type="number" name="raw_workers"
            value="{{ config.effective.raw_workers }}" min="1" max="16">
        </div>

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

        <div class="form-group">
          <label class="form-label" for="f-recheck">Force Recheck (days)</label>
          <input id="f-recheck" type="number" name="force_recheck_days"
            value="{{ config.effective.force_recheck_days }}" min="1">
        </div>
      </div>
    </div>

    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Save Configuration</button>
      <span class="form-feedback" id="setup-feedback"></span>
    </div>
  </form>
</div>

{% endblock %}