{% extends "base.html" %}
{% block title %}Config{% endblock %}
{% block content %}
<h1>Config</h1>
<p class="muted">Edit settings, storage and alerts below. Jobs are edited on the
  <a href="/jobs">Jobs</a> page; advanced fields live under Advanced (raw JSON).</p>

<h2>Settings</h2>
<div class="card">
  <div class="row">
    <label>data_path <input id="s-data_path" size="28"></label>
    <label>timezone
      <select id="s-timezone">
        <option value="local">local</option>
        <option value="UTC">UTC</option>
        <option value="Europe/Paris">Europe/Paris</option>
      </select>
    </label>
  </div>
  <div class="row" style="margin-top:.5rem;">
    <label>ui_host <input id="s-ui_host" size="14"></label>
    <label>ui_port <input id="s-ui_port" type="number" size="6"></label>
    <label>ui_auth_token <input id="s-ui_auth_token" size="20" placeholder="(none)"></label>
  </div>
</div>

<h2>Storage</h2>
<div class="card">
  <div class="row">
    <label>sync_interval (s) <input id="st-sync_interval" type="number" size="8"></label>
  </div>
  <table>
    <thead><tr><th>Provider</th><th>Remote</th><th></th></tr></thead>
    <tbody id="remotes-body"></tbody>
  </table>
  <div class="row">
    <input id="r-provider" placeholder="rclone" size="10" value="rclone">
    <input id="r-remote" placeholder="mynas:crypto/" size="20">
    <button class="ghost" onclick="addRemote()">Add remote</button>
  </div>
</div>

<h2>Alerts</h2>
<div class="card">
  <div class="row">
    <label>webhook_url <input id="a-webhook_url" size="32" placeholder="(none)"></label>
    <label>max_consecutive_errors
      <input id="a-max_consecutive_errors" type="number" size="4"></label>
  </div>
</div>

<h2>Advanced (raw JSON)</h2>
<div class="card">
  <details>
    <summary class="muted">View the full configuration as JSON
      (histo_jobs, stream_jobs, and every other field).</summary>
    <div class="row" style="margin-top:.5rem;">
      <button id="cfg-edit-btn" class="ghost" onclick="toggleAdvancedEdit()">Edit JSON</button>
      <span class="muted">Editing here overrides the form fields above on save.</span>
    </div>
    <pre id="cfg-pre" style="margin-top:.5rem;">Loading…</pre>
    <textarea id="cfg-text" spellcheck="false" style="display:none;"
              oninput="document.getElementById('cfg-pre').innerHTML = highlightJson(this.value);"></textarea>
  </details>
</div>

<div class="row">
  <button class="ghost" onclick="validateCfg()">Validate</button>
  <button onclick="saveCfg()">Save</button>
  <button class="ghost" onclick="loadCfg()">Reload</button>
</div>
<p id="cfg-msg" class="muted"></p>
{% endblock %}
{% block scripts %}
<script>
  let _cfg = {};
  let _remotes = [];
  let advancedEditMode = false;

  function setAdvancedJson(cfg) {
    const text = JSON.stringify(cfg, null, 2);
    document.getElementById('cfg-text').value = text;
    document.getElementById('cfg-pre').innerHTML = highlightJson(text);
  }

  function toggleAdvancedEdit() {
    advancedEditMode = !advancedEditMode;
    document.getElementById('cfg-text').style.display = advancedEditMode ? '' : 'none';
    document.getElementById('cfg-pre').style.display = advancedEditMode ? 'none' : '';
    document.getElementById('cfg-edit-btn').textContent =
      advancedEditMode ? 'Preview' : 'Edit JSON';
  }

  function setMsg(cls, text) {
    const m = document.getElementById('cfg-msg');
    m.className = cls; m.textContent = text;
  }

  function selectTimezone(tz) {
    const sel = document.getElementById('s-timezone');
    let found = false;
    for (const o of sel.options) { if (o.value === tz) { found = true; break; } }
    if (!found) { sel.add(new Option(tz, tz)); }
    sel.value = tz;
  }

  function renderRemotes() {
    const tb = document.getElementById('remotes-body');
    if (!_remotes.length) {
      tb.innerHTML = '<tr><td colspan="3" class="muted">None.</td></tr>';
      return;
    }
    tb.innerHTML = _remotes.map(function (r, i) {
      return '<tr><td>' + escapeHtml(r.provider || 'rclone') + '</td><td>' +
        escapeHtml(r.remote) + '</td><td><button class="danger" onclick="rmRemote(' +
        i + ')">Remove</button></td></tr>';
    }).join('');
  }

  function addRemote() {
    const remote = document.getElementById('r-remote').value.trim();
    if (!remote) { setMsg('err', 'Remote must not be empty.'); return; }
    const provider = document.getElementById('r-provider').value.trim() || 'rclone';
    _remotes.push({ provider, remote });
    document.getElementById('r-remote').value = '';
    renderRemotes();
  }

  function rmRemote(i) { _remotes.splice(i, 1); renderRemotes(); }

  function fillForm(cfg) {
    const s = cfg.settings || {};
    document.getElementById('s-data_path').value = s.data_path || '';
    selectTimezone(s.timezone || 'local');
    document.getElementById('s-ui_host').value = s.ui_host || '';
    document.getElementById('s-ui_port').value = s.ui_port != null ? s.ui_port : '';
    document.getElementById('s-ui_auth_token').value = s.ui_auth_token || '';

    const st = cfg.storage || {};
    document.getElementById('st-sync_interval').value =
      st.sync_interval != null ? st.sync_interval : '';
    _remotes = (st.remotes || []).map(function (r) {
      return { provider: r.provider || 'rclone', remote: r.remote };
    });
    renderRemotes();

    const a = cfg.alerts || {};
    document.getElementById('a-webhook_url').value = a.webhook_url || '';
    document.getElementById('a-max_consecutive_errors').value =
      a.max_consecutive_errors != null ? a.max_consecutive_errors : '';
  }

  // Merge form fields back into the last-loaded config object.
  function collect() {
    const out = JSON.parse(JSON.stringify(_cfg));
    out.settings = out.settings || {};
    out.settings.data_path = document.getElementById('s-data_path').value.trim();
    out.settings.timezone = document.getElementById('s-timezone').value;
    out.settings.ui_host = document.getElementById('s-ui_host').value.trim();
    out.settings.ui_port = parseInt(document.getElementById('s-ui_port').value, 10);
    const tok = document.getElementById('s-ui_auth_token').value.trim();
    out.settings.ui_auth_token = tok || null;

    out.storage = out.storage || {};
    // local_path is not a form field; when it merely tracks data_path (empty or
    // equal to the previously loaded value) keep it in sync with the new data_path.
    const prevDataPath = (_cfg.settings || {}).data_path || '';
    if (!out.storage.local_path || out.storage.local_path === prevDataPath) {
      out.storage.local_path = out.settings.data_path;
    }
    out.storage.sync_interval =
      parseInt(document.getElementById('st-sync_interval').value, 10);
    out.storage.remotes = _remotes.map(function (r) {
      return { provider: r.provider || 'rclone', remote: r.remote };
    });

    out.alerts = out.alerts || {};
    out.alerts.webhook_url =
      document.getElementById('a-webhook_url').value.trim() || null;
    out.alerts.max_consecutive_errors =
      parseInt(document.getElementById('a-max_consecutive_errors').value, 10);
    return out;
  }

  // The Advanced textarea wins when its <details> is open and holds valid JSON.
  function buildBody() {
    const ta = document.getElementById('cfg-text');
    const details = ta.closest('details');
    if (details && details.open && advancedEditMode) {
      try { return JSON.parse(ta.value); }
      catch (e) { throw new Error('Invalid JSON in Advanced: ' + e.message); }
    }
    return collect();
  }

  async function loadCfg() {
    _cfg = await api('GET', '/api/config');
    fillForm(_cfg);
    setAdvancedJson(_cfg);
    setMsg('muted', 'Loaded.');
  }

  async function validateCfg() {
    let body;
    try { body = buildBody(); } catch (e) { setMsg('err', e.message); return; }
    const r = await api('POST', '/api/config/validate', body);
    if (r.valid) setMsg('ok', 'Valid.');
    else setMsg('err', r.error);
  }

  async function saveCfg() {
    let body;
    try { body = buildBody(); } catch (e) { setMsg('err', e.message); return; }
    try {
      const saved = await api('PUT', '/api/config', body);
      _cfg = saved;
      fillForm(_cfg);
      setAdvancedJson(_cfg);
      setMsg('ok', 'Saved.');
    } catch (e) { setMsg('err', e.message); }
  }

  loadCfg();
</script>
{% endblock %}