{% extends "base.html" %}

{% block title %}{{ _('Impostazioni') }} - TieMeasureFlow{% endblock %}

{% block content %}
<div class="tmf-page" x-data="{ tab: {{ active_tab|tojson_attr }} }">

  <!-- Header -->
  <div class="mb-4">
    <h1 class="text-2xl font-bold text-[var(--text-primary)]">{{ _('Impostazioni di Sistema') }}</h1>
    <p class="mt-1 text-sm text-[var(--text-secondary)]">{{ _('Configura i parametri generali del sistema') }}</p>
  </div>

  <!-- #50: tab. L'intera pagina e' gia' solo per admin (admin_required) -->
  <div class="flex gap-1 mb-6 border-b border-[var(--border-color)]">
    <button type="button" @click="tab = 'generale'"
            :class="tab === 'generale' ? 'border-primary text-primary' : 'border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)]'"
            class="px-4 py-2 -mb-px text-sm font-medium border-b-2 transition-colors">{{ _('Generale') }}</button>
    <button type="button" @click="tab = 'utenti'"
            :class="tab === 'utenti' ? 'border-primary text-primary' : 'border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)]'"
            class="px-4 py-2 -mb-px text-sm font-medium border-b-2 transition-colors">{{ _('Utenti') }}</button>
  </div>

  <div x-show="tab === 'utenti'" x-cloak>
    {% include "admin/_users_panel.html" %}
  </div>

  {# #65: niente larghezza propria, la scheda sta nella cornice .tmf-page #}
  <div x-show="tab === 'generale'" x-data="systemSettings()">
  <!-- Settings Card -->
  <div class="tmf-card mb-6">
    <div class="tmf-card-header flex items-center gap-2">
      <svg class="w-4 h-4 text-[var(--text-muted)]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
      {{ _('Sessione e Sicurezza') }}
    </div>

    <div class="tmf-card-body space-y-5">
      <!-- Auto-logout -->
      <div>
        <label class="tmf-label" for="auto-logout">{{ _('Auto-logout per inattività (minuti)') }}</label>
        <div class="flex items-center gap-3">
          <input id="auto-logout"
                 type="number"
                 x-model.number="autoLogoutMinutes"
                 class="tmf-input w-32"
                 min="1"
                 max="480"
                 placeholder="—">
          <button @click="autoLogoutMinutes = null"
                  class="text-xs text-[var(--text-muted)] hover:text-red-500 transition-colors"
                  x-show="autoLogoutMinutes">
            {{ _('Disabilita') }}
          </button>
        </div>
        <p class="text-xs text-[var(--text-muted)] mt-1">
          {{ _('L\'operatore verrà disconnesso automaticamente dopo il periodo di inattività indicato. Lasciare vuoto per disabilitare.') }}
        </p>
      </div>

      <!-- #47: durata loop predefinita delle ricette -->
      <div class="pt-5 border-t border-[var(--border-color)]">
        <h3 class="text-sm font-semibold text-[var(--text-primary)] mb-3">{{ _('Ricette') }}</h3>
        <label class="tmf-label" for="default-interval">{{ _('Durata loop predefinita (minuti)') }}</label>
        <input id="default-interval" type="number" x-model="defaultInterval" class="tmf-input w-32" min="1" max="1440" placeholder="—">
        <p class="text-xs text-[var(--text-muted)] mt-1">{{ _('Proposta come intervallo di misura nelle nuove ricette (1-1440). Vuoto = nessun predefinito.') }}</p>
      </div>

      <!-- #48: tolleranze generali -->
      <div class="pt-5 border-t border-[var(--border-color)]">
        <h3 class="text-sm font-semibold text-[var(--text-primary)] mb-3">{{ _('Tolleranze generali') }}</h3>
        <div class="flex items-center gap-6">
          <div>
            <label class="tmf-label" for="tol-plus">{{ _('Tolleranza +') }}</label>
            <input id="tol-plus" type="text" inputmode="decimal" x-model="tolPlus" class="tmf-input w-32" placeholder="—">
          </div>
          <div>
            <label class="tmf-label" for="tol-minus">{{ _('Tolleranza −') }}</label>
            <input id="tol-minus" type="text" inputmode="decimal" x-model="tolMinus" class="tmf-input w-32" placeholder="—">
          </div>
        </div>
        <p class="text-xs text-[var(--text-muted)] mt-1">{{ _('Valori positivi (zero o più) proposti come tolleranza nelle nuove misure. Vuoto = nessun predefinito.') }}</p>
      </div>

      <!-- #49: anagrafiche (liste di scelta) -->
      <div class="pt-5 border-t border-[var(--border-color)]">
        <h3 class="text-sm font-semibold text-[var(--text-primary)] mb-3">{{ _('Anagrafiche') }}</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <template x-for="lst in ['types', 'units']" :key="lst">
            <div>
              <label class="tmf-label" x-text="lst === 'types' ? {{ _('Tipi di misura')|tojson_attr }} : {{ _('Unità di misura')|tojson_attr }}"></label>
              <ul class="space-y-1 mb-2">
                <template x-for="(item, i) in lists[lst]" :key="lst + i">
                  <li class="flex items-center gap-1 text-sm">
                    <span class="flex-1 px-2 py-1 rounded bg-[var(--bg-secondary)] text-[var(--text-primary)]" x-text="item"></span>
                    <button type="button" @click="moveItem(lst, i, -1)" :disabled="i === 0" class="px-1.5 text-[var(--text-muted)] hover:text-primary disabled:opacity-30" title="{{ _('Su') }}">▲</button>
                    <button type="button" @click="moveItem(lst, i, 1)" :disabled="i === lists[lst].length - 1" class="px-1.5 text-[var(--text-muted)] hover:text-primary disabled:opacity-30" title="{{ _('Giù') }}">▼</button>
                    <button type="button" @click="removeItem(lst, i)" class="px-1.5 text-[var(--text-muted)] hover:text-red-500" title="{{ _('Rimuovi') }}">✕</button>
                  </li>
                </template>
              </ul>
              <div class="flex gap-2">
                <input type="text" x-model="newItem[lst]" @keydown.enter.prevent="addItem(lst)" class="tmf-input flex-1" placeholder="{{ _('Nuova voce') }}">
                <button type="button" @click="addItem(lst)" class="btn btn-secondary">{{ _('Aggiungi') }}</button>
              </div>
            </div>
          </template>
        </div>
        <p class="text-xs text-[var(--text-muted)] mt-2">{{ _('Massimo 50 voci per lista. Un elenco vuoto = nessuna scelta predefinita.') }}</p>
      </div>
    </div>

    <div class="tmf-card-footer flex items-center justify-between">
      <span x-show="saved" x-transition class="text-sm text-emerald-600 flex items-center gap-1">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
        </svg>
        {{ _('Salvato') }}
      </span>
      <span x-show="errorMessage" x-transition class="text-sm text-red-600" x-text="errorMessage"></span>
      <div class="flex-1"></div>
      <button @click="save()"
              :disabled="saving"
              class="btn btn-primary gap-1.5">
        <svg x-show="!saving" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
        </svg>
        <svg x-show="saving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
        </svg>
        {{ _('Salva impostazioni') }}
      </button>
    </div>
  </div>
  </div><!-- /tab generale -->
</div>
{% endblock %}

{% block extra_js %}
<script>
// #49: legge un array JSON di stringhe salvato come impostazione; vuoto/malformato = lista vuota
function tmfParseList(raw) {
  try { var a = JSON.parse(raw || '[]'); return Array.isArray(a) ? a.map(String) : []; }
  catch (e) { return []; }
}
function systemSettings() {
  return {
    autoLogoutMinutes: {{ (settings.auto_logout_minutes or '')|tojson }},
    // #47-#49: nuove chiavi (valori stringa, vuoto = nessun default)
    defaultInterval: {{ (settings.default_measurement_interval_minutes or '')|tojson }},
    tolPlus: {{ (settings.general_tolerance_plus or '')|tojson }},
    tolMinus: {{ (settings.general_tolerance_minus or '')|tojson }},
    lists: {
      types: tmfParseList({{ (settings.list_measurement_types or '')|tojson }}),
      units: tmfParseList({{ (settings.list_units or '')|tojson }})
    },
    newItem: { types: '', units: '' },
    saving: false,
    saved: false,
    errorMessage: '',

    addItem(lst) {
      var v = (this.newItem[lst] || '').trim();
      if (!v) return;
      if (this.lists[lst].length >= 50) { this.errorMessage = {{ _('Massimo 50 voci per lista')|tojson }}; return; }
      if (this.lists[lst].indexOf(v) === -1) this.lists[lst].push(v);
      this.newItem[lst] = '';
    },
    removeItem(lst, i) { this.lists[lst].splice(i, 1); },
    moveItem(lst, i, d) {
      var a = this.lists[lst].slice(), j = i + d;
      if (j < 0 || j >= a.length) return;
      var t = a[i]; a[i] = a[j]; a[j] = t;
      this.lists[lst] = a;
    },

    async save() {
      this.saving = true;
      this.saved = false;
      this.errorMessage = '';

      var csrfToken = document.querySelector('meta[name=csrf-token]')?.content;
      var payload = {
        auto_logout_minutes: this.autoLogoutMinutes ? String(this.autoLogoutMinutes) : '',
        default_measurement_interval_minutes: String(this.defaultInterval || '').trim(),
        // virgola decimale accettata in input, il backend vuole il punto
        general_tolerance_plus: String(this.tolPlus || '').trim().replace(',', '.'),
        general_tolerance_minus: String(this.tolMinus || '').trim().replace(',', '.'),
        list_measurement_types: this.lists.types.length ? JSON.stringify(this.lists.types) : '',
        list_units: this.lists.units.length ? JSON.stringify(this.lists.units) : ''
      };

      try {
        var resp = await fetch('/admin/api/settings', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken || '' },
          body: JSON.stringify(payload)
        });
        var data = await resp.json();
        if (data.error) {
          this.errorMessage = data.detail || data.error;
        } else {
          this.saved = true;
          setTimeout(() => { this.saved = false; }, 3000);
        }
      } catch (err) {
        this.errorMessage = {{ _('Errore di connessione al server')|tojson }};
      }
      this.saving = false;
    }
  };
}
</script>
{% include "admin/_users_script.html" %}
{% endblock %}