{% extends "base.html" %}
{% block title %}{{ 'Éditer' if job else 'Nouveau job' }}{% endblock %}

{% block content %}
<div class="max-w-2xl">
  <h1 class="text-xl font-bold text-gray-900 mb-6">
    {{ 'Éditer « ' + job.name + ' »' if job else 'Nouveau job de sauvegarde' }}
  </h1>

  <form method="post"
        action="{{ url_for('job_edit', job_id=job.id) if job else url_for('job_new') }}"
        class="space-y-6">

    {# ── Infos générales ── #}
    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
      <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Général</h2>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Nom du job</label>
        <input type="text" name="name" required
               value="{{ job.name if job else '' }}"
               placeholder="ex: Nextcloud quotidien"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
        <select name="type" id="job-type"
                class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
          {% for val, label in [('ynh_app','Application YunoHost'), ('ynh_system','Système YunoHost'),
                                ('mysql','MySQL'), ('postgresql','PostgreSQL'),
                                ('custom_dir','Répertoire custom')] %}
            <option value="{{ val }}"
              {% if job and job.type == val %}selected{% endif %}
              >
              {{ label }}
            </option>
          {% endfor %}
        </select>
      </div>

      {# Type-specific config : ynh_app #}
      <div id="cfg-ynh_app" class="type-cfg space-y-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Application YunoHost</label>
          <select name="app_id"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            {% set current_app_id = (job.config_json | fromjson).get('app_id', '') if job and job.config_json else '' %}
            {% for ynh_app in ynh_apps %}
              <option value="{{ ynh_app.id }}"
                      {% if ynh_app.id == current_app_id %}selected{% endif %}>
                {{ ynh_app.id }}{% if ynh_app.label %} — {{ ynh_app.label }}{% endif %}
              </option>
            {% endfor %}
            {% if not ynh_apps %}
              <option value="">Aucune application trouvée</option>
            {% endif %}
          </select>
        </div>
        <div class="flex items-center gap-2">
          {% set core_only = (job.config_json | fromjson).get('core_only', False) if job and job.config_json else False %}
          <input type="checkbox" name="core_only" value="1" id="core_only"
                 {% if core_only %}checked{% endif %}
                 class="rounded border-gray-300 text-blue-600">
          <label for="core_only" class="text-sm text-gray-700">
            Core only (BACKUP_CORE_ONLY=1) — exclut les données utilisateur
          </label>
        </div>
      </div>

      {# Type-specific config : ynh_system (rien de spécifique) #}
      <div id="cfg-ynh_system" class="type-cfg hidden">
        <p class="text-sm text-gray-500 bg-gray-50 rounded-lg p-3">
          Sauvegarde la configuration système YunoHost complète.
          Aucun paramètre supplémentaire.
        </p>
      </div>

      {# Type-specific config : mysql #}
      {% set db_cfg = (job.config_json | fromjson) if job and job.config_json else {} %}
      <div id="cfg-mysql" class="type-cfg hidden space-y-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Nom de la base de données</label>
          <input type="text" name="db_database"
                 value="{{ db_cfg.get('database', '') if job and job.type == 'mysql' else '' }}"
                 placeholder="ex: nextcloud"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
          <p class="text-xs text-gray-400 mt-1">
            Le dump est exécuté avec <code class="bg-gray-100 px-1 rounded">sudo mysqldump</code> — aucun mot de passe requis.
          </p>
        </div>
      </div>

      {# Type-specific config : postgresql #}
      <div id="cfg-postgresql" class="type-cfg hidden space-y-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Nom de la base de données</label>
          <input type="text" name="db_database"
                 value="{{ db_cfg.get('database', '') if job and job.type == 'postgresql' else '' }}"
                 placeholder="ex: gitea"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
          <p class="text-xs text-gray-400 mt-1">
            Le dump est exécuté avec <code class="bg-gray-100 px-1 rounded">sudo -u postgres pg_dump</code> — aucun mot de passe requis.
          </p>
        </div>
      </div>

      {# Type-specific config : custom_dir #}
      {% set cd_cfg = (job.config_json | fromjson) if job and job.config_json and job.type == 'custom_dir' else {} %}
      {% set cd_restore = cd_cfg.get('restore', {}) %}
      <div id="cfg-custom_dir" class="type-cfg hidden space-y-4">

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Chemin à sauvegarder</label>
          <input type="text" name="source_path"
                 value="{{ cd_cfg.get('source_path', '') }}"
                 placeholder="/opt/monapp"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Exclusions <span class="font-normal text-gray-400">(une par ligne)</span></label>
          <textarea name="excludes" rows="3" placeholder="cache/&#10;logs/&#10;*.tmp"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">{{ cd_cfg.get('excludes', []) | join('\n') }}</textarea>
        </div>

        {# Section restauration (optionnel, collapsible) #}
        <details {% if cd_restore %}open{% endif %} class="border border-gray-200 rounded-lg">
          <summary class="px-4 py-3 text-sm font-medium text-gray-700 cursor-pointer hover:bg-gray-50 select-none">
            Configuration de restauration <span class="text-gray-400 font-normal">(optionnel)</span>
          </summary>
          <div class="px-4 pb-4 pt-2 space-y-4 border-t border-gray-100">

            <div>
              <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Utilisateur système</p>
              <div class="grid grid-cols-3 gap-3">
                <div>
                  <label class="block text-xs text-gray-600 mb-1">Nom</label>
                  <input type="text" name="restore_user_name"
                         value="{{ cd_restore.get('system_user', {}).get('name', '') }}"
                         placeholder="monapp" class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
                <div>
                  <label class="block text-xs text-gray-600 mb-1">Home</label>
                  <input type="text" name="restore_user_home"
                         value="{{ cd_restore.get('system_user', {}).get('home', '') }}"
                         placeholder="/opt/monapp" class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
                <div>
                  <label class="block text-xs text-gray-600 mb-1">Shell</label>
                  <input type="text" name="restore_user_shell"
                         value="{{ cd_restore.get('system_user', {}).get('shell', '/bin/false') }}"
                         placeholder="/bin/false" class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
              </div>
            </div>

            <div>
              <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Service systemd</p>
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <label class="block text-xs text-gray-600 mb-1">Nom du service</label>
                  <input type="text" name="restore_service_name"
                         value="{{ cd_restore.get('systemd_service', {}).get('name', '') }}"
                         placeholder="monapp" class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
                <div>
                  <label class="block text-xs text-gray-600 mb-1">Fichier .service</label>
                  <input type="text" name="restore_service_file"
                         value="{{ cd_restore.get('systemd_service', {}).get('service_file', '') }}"
                         placeholder="/opt/monapp/monapp.service" class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
              </div>
            </div>

            <div>
              <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Permissions</p>
              <div class="grid grid-cols-2 gap-3">
                <div>
                  <label class="block text-xs text-gray-600 mb-1">Propriétaire (user:group)</label>
                  <input type="text" name="restore_perm_owner"
                         value="{{ cd_restore.get('permissions', {}).get('owner', '') }}"
                         placeholder="monapp:monapp" class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
                <div>
                  <label class="block text-xs text-gray-600 mb-1">Mode (chmod)</label>
                  <input type="text" name="restore_perm_mode"
                         value="{{ cd_restore.get('permissions', {}).get('mode', '') }}"
                         placeholder="750" class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-blue-500">
                </div>
              </div>
            </div>

            <div>
              <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
                Commandes post-restauration <span class="font-normal text-gray-400">(une par ligne)</span>
              </label>
              <textarea name="restore_post_cmds" rows="3"
                        placeholder="systemctl restart monapp"
                        class="w-full border border-gray-300 rounded px-2 py-1.5 text-xs font-mono focus:outline-none focus:ring-1 focus:ring-blue-500">{{ cd_restore.get('post_restore_commands', []) | join('\n') }}</textarea>
            </div>

          </div>
        </details>
      </div>
    </div>

    {# ── Planification ── #}
    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
      <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Planification</h2>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Expression cron</label>
        <input type="text" name="cron_expr" required
               value="{{ job.cron_expr if job else '0 3 * * *' }}"
               placeholder="0 3 * * *"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500">
        <p class="text-xs text-gray-400 mt-1">
          Format : minute heure jour mois jour_semaine
          — ex: <code class="bg-gray-100 px-1 rounded">0 3 * * *</code> = tous les jours à 3h
          · <code class="bg-gray-100 px-1 rounded">0 3 * * 1</code> = chaque lundi à 3h
        </p>
      </div>
    </div>

    {# ── Rétention ── #}
    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
      <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Rétention</h2>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Mode</label>
          <select name="retention_mode"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            {% for val, label in [('count','Count — N dernières archives'),
                                  ('daily','Daily — 1 par jour sur N jours'),
                                  ('gfs','GFS — Grand/Père/Fils (Phase 4)')] %}
              <option value="{{ val }}"
                {% if job and job.retention_mode == val %}selected{% endif %}
                {% if val == 'gfs' %}disabled class="text-gray-400"{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Valeur</label>
          <input type="number" name="retention_value" min="1" max="365" required
                 value="{{ job.retention_value if job else 7 }}"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
      </div>
    </div>

    {# ── Destination ── #}
    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-3">
      <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Transfert après sauvegarde</h2>
      <select name="destination_id"
              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        <option value="">Aucune — stockage local uniquement</option>
        {% for d in destinations %}
          <option value="{{ d.id }}"
                  {% if job and job.destination_id == d.id %}selected{% endif %}>
            {{ d.name }} — {{ d.remote_str }}
          </option>
        {% endfor %}
      </select>
      {% if not destinations %}
        <p class="text-xs text-gray-400">
          Aucune destination configurée.
          <a href="{{ url_for('destination_new') }}" class="text-blue-600 hover:underline">En créer une →</a>
        </p>
      {% endif %}
    </div>

    {# ── Options ── #}
    <div class="bg-white rounded-xl border border-gray-200 p-6">
      <div class="flex items-center gap-3">
        <input type="checkbox" name="enabled" value="1" id="enabled"
               {% if not job or job.enabled %}checked{% endif %}
               class="rounded border-gray-300 text-blue-600">
        <label for="enabled" class="text-sm font-medium text-gray-700">Job activé</label>
      </div>
    </div>

    {# ── Actions ── #}
    <div class="flex gap-3">
      <button type="submit"
              class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg font-medium text-sm transition">
        {{ 'Enregistrer' if job else 'Créer le job' }}
      </button>
      <a href="{{ url_for('index') }}"
         class="bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 px-5 py-2 rounded-lg font-medium text-sm transition">
        Annuler
      </a>
    </div>
  </form>
</div>

<script>
  function showTypeConfig() {
    document.querySelectorAll('.type-cfg').forEach(el => el.classList.add('hidden'));
    const type = document.getElementById('job-type').value;
    const el = document.getElementById('cfg-' + type);
    if (el) el.classList.remove('hidden');
  }
  document.getElementById('job-type').addEventListener('change', showTypeConfig);
  showTypeConfig();
</script>
{% endblock %}