{% extends '@App/partials/base.html.twig' %}

{% block title %}Réglages généraux{% endblock %}

{% block content %}
  {% include '@App/partials/layout/_toast.html.twig' %}
<div class="body-wrapper">
  <div class="container-fluid py-4" data-controller="general-settings">
    <form method="post" action="{{ path('app_general_settings') }}" novalidate data-turbo="false" data-action="submit->general-settings#submit" data-general-settings-target="form">
      <input type="hidden" name="_csrf_token" value="{{ csrf_token('app_general_settings') }}">
      <div class="alert d-none mb-4" data-general-settings-target="feedback"></div>

      <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
        <div>
          <h2 class="mb-1 fw-bold">Réglages généraux</h2>
          <p class="text-muted mb-0">Gérez les paramètres globaux, les modules activés et les options IA de FundUp.</p>
        </div>
        <div class="d-flex gap-2">
          <a href="{{ path('app_index') }}" class="btn btn-light border">Annuler</a>
          <button type="submit" class="btn btn-success px-4" data-general-settings-target="submitButton">
            <i class="ti ti-check me-2"></i>Enregistrer les modifications
          </button>
        </div>
      </div>

      <div class="row g-4">
        <div class="col-12 col-xl-3">
          <div class="card border-0 shadow-sm settings-side-nav">
            <div class="card-body p-3">
              <div class="settings-nav-list">
                <a href="#section-general" class="settings-nav-item is-active">Général</a>
                <a href="#section-modules" class="settings-nav-item">Modules</a>
                <a href="#section-ia" class="settings-nav-item">IA</a>
                <a href="#section-securite" class="settings-nav-item">Sécurité</a>
                <a href="#section-apparence" class="settings-nav-item">Apparence</a>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12 col-xl-9">
          <div class="d-flex flex-column gap-4">
            <section id="section-general" class="card border-0 shadow-sm">
              <div class="card-body p-4">
                <div class="mb-4">
                  <h4 class="fw-bold mb-1">Général</h4>
                  <p class="text-muted mb-0">Paramètres globaux de base appliqués à l’ensemble de la plateforme.</p>
                </div>

                <div class="row g-3">
                  <div class="col-md-6">
                    <label class="form-label fw-semibold" for="app_name">Nom de l’application</label>
                    <input type="text" class="form-control" id="app_name" name="app_name" value="{{ settings.app_name }}">
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-semibold" for="support_email">Email de contact support</label>
                    <input type="email" class="form-control" id="support_email" name="support_email" value="{{ settings.support_email }}">
                  </div>
                  <div class="col-md-4">
                    <label class="form-label fw-semibold" for="default_locale">Langue par défaut</label>
                    <select class="form-select" id="default_locale" name="default_locale">
                      {% for value, label in localeOptions %}
                        <option value="{{ value }}" {{ settings.default_locale == value ? 'selected' : '' }}>{{ label }}</option>
                      {% endfor %}
                    </select>
                  </div>
                  <div class="col-md-4">
                    <label class="form-label fw-semibold" for="default_timezone">Fuseau horaire</label>
                    <select class="form-select" id="default_timezone" name="default_timezone">
                      {% for value, label in timezoneOptions %}
                        <option value="{{ value }}" {{ settings.default_timezone == value ? 'selected' : '' }}>{{ label }}</option>
                      {% endfor %}
                    </select>
                  </div>
                  <div class="col-md-4">
                    <label class="form-label fw-semibold" for="default_currency">Devise principale</label>
                    <select class="form-select" id="default_currency" name="default_currency">
                      {% for value, label in currencyOptions %}
                        <option value="{{ value }}" {{ settings.default_currency == value ? 'selected' : '' }}>{{ label }}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
              </div>
            </section>

            <section id="section-modules" class="card border-0 shadow-sm">
              <div class="card-body p-4">
                <div class="mb-4">
                  <h4 class="fw-bold mb-1">Modules activables</h4>
                  <p class="text-muted mb-0">Activez ou désactivez les fonctionnalités selon les besoins de votre organisation.</p>
                </div>

                <div class="row g-3">
                  {% for module in moduleCards %}
                    {% set enabled = attribute(settings, module.key) %}
                    <div class="col-12 col-lg-6">
                      <label class="module-card {{ enabled ? 'is-enabled' : '' }}" data-general-settings-target="moduleCard">
                        <div class="module-card-header">
                          <div class="module-icon">
                            <i class="{{ module.icon }}"></i>
                          </div>
                          <div class="flex-grow-1">
                            <div class="d-flex flex-wrap align-items-center gap-2">
                              <div class="fw-semibold">{{ module.title }}</div>
                              <span class="badge {{ enabled ? 'bg-success-subtle text-success' : 'bg-light text-muted border' }}" data-general-settings-target="moduleBadge">
                                {{ enabled ? 'Actif' : 'Inactif' }}
                              </span>
                              {% if module.badge is defined and settings.appearance_show_beta_badges %}
                                <span class="badge bg-warning-subtle text-warning">{{ module.badge }}</span>
                              {% endif %}
                            </div>
                            <div class="text-muted small mt-2">{{ module.description }}</div>
                          </div>
                          <div class="form-check form-switch m-0">
                            <input
                              class="form-check-input"
                              type="checkbox"
                              role="switch"
                              name="{{ module.key == 'ai_enabled' ? '_ai_enabled_module_ui' : module.key }}"
                              value="1"
                              {{ enabled ? 'checked' : '' }}
                              data-action="change->general-settings#handleCriticalToggle change->general-settings#refreshModuleStates{% if module.key == 'ai_enabled' %} change->general-settings#syncAiToggleFromModule{% endif %}"
                              {% if module.critical %}data-critical-module="true"{% endif %}
                              data-setting-key="{{ module.key }}"
                              {% if module.key == 'ai_enabled' %}data-general-settings-target="aiModuleToggle"{% endif %}
                            >
                          </div>
                        </div>
                      </label>
                    </div>
                  {% endfor %}
                </div>
              </div>
            </section>

            <section id="section-ia" class="card border-0 shadow-sm">
              <div class="card-body p-4">
                <div class="mb-4 d-flex align-items-start justify-content-between gap-3">
                  <div>
                    <h4 class="fw-bold mb-1">Configuration de l’IA</h4>
                    <p class="text-muted mb-0">Paramétrez le comportement de l’assistance IA globale.</p>
                  </div>
                  <div class="form-check form-switch mt-1">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      role="switch"
                      id="ai_enabled"
                      name="ai_enabled"
                      value="1"
                      {{ settings.ai_enabled ? 'checked' : '' }}
                      data-general-settings-target="aiToggle"
                      data-setting-key="ai_enabled"
                      data-action="change->general-settings#syncAiState change->general-settings#syncModuleToggleFromAi change->general-settings#refreshModuleStates"
                    >
                  </div>
                </div>

                <div data-general-settings-target="aiSection">
                  <div class="row g-3">
                    <div class="col-md-6">
                      <label class="form-label fw-semibold" for="ai_provider">Provider IA</label>
                      <select class="form-select" id="ai_provider" name="ai_provider">
                        {% for provider in aiProviders %}
                          <option value="{{ provider }}" {{ settings.ai_provider == provider ? 'selected' : '' }}>{{ provider }}</option>
                        {% endfor %}
                      </select>
                    </div>
                    <div class="col-md-6">
                      <label class="form-label fw-semibold" for="ai_model">Modèle par défaut</label>
                      <input type="text" class="form-control" id="ai_model" name="ai_model" value="{{ settings.ai_model }}">
                    </div>
                  </div>

                  <hr class="my-4">

                  <div class="fw-semibold mb-3">Fonctionnalités autorisées</div>
                  <div class="d-flex flex-column gap-3">
                    <label class="settings-check">
                      <input class="form-check-input mt-1" type="checkbox" name="ai_generate_content_enabled" value="1" {{ settings.ai_generate_content_enabled ? 'checked' : '' }}>
                      <span>
                        <strong>Génération de contenus</strong>
                        <span class="d-block text-muted small">Autorise la création de brouillons pour les emails, descriptions de projets et rapports.</span>
                      </span>
                    </label>
                    <label class="settings-check">
                      <input class="form-check-input mt-1" type="checkbox" name="ai_compliance_analysis_enabled" value="1" {{ settings.ai_compliance_analysis_enabled ? 'checked' : '' }}>
                      <span>
                        <strong>Analyse de conformité</strong>
                        <span class="d-block text-muted small">Permet l’analyse assistée des conventions, formules et contenus sensibles.</span>
                      </span>
                    </label>
                    <label class="settings-check">
                      <input class="form-check-input mt-1" type="checkbox" name="ai_writing_assistant_enabled" value="1" {{ settings.ai_writing_assistant_enabled ? 'checked' : '' }}>
                      <span>
                        <strong>Assistant de rédaction</strong>
                        <span class="d-block text-muted small">Aide à reformuler et structurer des contenus sans se substituer à la validation humaine.</span>
                      </span>
                    </label>
                  </div>

                  <div class="alert alert-primary-subtle border border-primary-subtle text-primary-emphasis mt-4 mb-0">
                    <div class="fw-semibold mb-1"><i class="ti ti-info-circle me-1"></i>Avertissement de responsabilité</div>
                    L’intelligence artificielle est une aide à la rédaction et à l’analyse. Ses suggestions ne remplacent jamais une validation humaine, opérationnelle ou juridique.
                  </div>
                </div>
              </div>
            </section>

            <section id="section-securite" class="card border-0 shadow-sm">
              <div class="card-body p-4">
                <div class="mb-4">
                  <h4 class="fw-bold mb-1">Sécurité</h4>
                  <p class="text-muted mb-0">Réglez les garde-fous appliqués aux paramètres et modules globaux.</p>
                </div>

                <div class="settings-switch-list">
                  <label class="settings-switch-row">
                    <span>
                      <strong>Restriction de configuration</strong>
                      <span class="d-block text-muted small">Autoriser uniquement les administrateurs globaux à modifier ces réglages.</span>
                    </span>
                    <input class="form-check-input" type="checkbox" role="switch" name="admin_only_module_settings" value="1" {{ settings.admin_only_module_settings ? 'checked' : '' }}>
                  </label>
                  <label class="settings-switch-row">
                    <span>
                      <strong>Journal d’audit détaillé</strong>
                      <span class="d-block text-muted small">Conserver une trace complète des modifications critiques de configuration.</span>
                    </span>
                    <input class="form-check-input" type="checkbox" role="switch" name="config_logs_enabled" value="1" {{ settings.config_logs_enabled ? 'checked' : '' }}>
                  </label>
                  <label class="settings-switch-row">
                    <span>
                      <strong>Rapport d’erreur</strong>
                      <span class="d-block text-muted small">Permet d’envoyer automatiquement un email au support lorsqu’une erreur est détectée. Les erreurs restent journalisées en base même si ce switch est désactivé.</span>
                    </span>
                    <input class="form-check-input" type="checkbox" role="switch" name="error_reporting_enabled" value="1" {{ settings.error_reporting_enabled ? 'checked' : '' }}>
                  </label>
                  <label class="settings-switch-row">
                    <span>
                      <strong>Protection des modules critiques</strong>
                      <span class="d-block text-muted small">Demander une confirmation supplémentaire avant la désactivation de l’IA ou de la signature électronique.</span>
                    </span>
                    <input class="form-check-input" type="checkbox" role="switch" name="confirm_critical_module_disable" value="1" {{ settings.confirm_critical_module_disable ? 'checked' : '' }} data-general-settings-target="criticalConfirmToggle">
                  </label>
                </div>
              </div>
            </section>

            <section id="section-apparence" class="card border-0 shadow-sm">
              <div class="card-body p-4">
                <div class="mb-4">
                  <h4 class="fw-bold mb-1">Apparence</h4>
                  <p class="text-muted mb-0">Quelques réglages d’interface globaux pour l’administration.</p>
                </div>

                <div class="settings-switch-list">
                  <label class="settings-switch-row">
                    <span>
                      <strong>Sidebar compacte</strong>
                      <span class="d-block text-muted small">Réduit visuellement certains espacements de navigation dans l’administration.</span>
                    </span>
                    <input class="form-check-input" type="checkbox" role="switch" name="appearance_compact_sidebar" value="1" {{ settings.appearance_compact_sidebar ? 'checked' : '' }}>
                  </label>
                  <label class="settings-switch-row">
                    <span>
                      <strong>Cartes arrondies</strong>
                      <span class="d-block text-muted small">Conserve un rendu plus doux pour les blocs de réglages et modules.</span>
                    </span>
                    <input class="form-check-input" type="checkbox" role="switch" name="appearance_rounded_cards" value="1" {{ settings.appearance_rounded_cards ? 'checked' : '' }}>
                  </label>
                  <label class="settings-switch-row">
                    <span>
                      <strong>Afficher les badges bêta</strong>
                      <span class="d-block text-muted small">Permet d’indiquer visuellement les modules en cours de déploiement.</span>
                    </span>
                    <input class="form-check-input" type="checkbox" role="switch" name="appearance_show_beta_badges" value="1" {{ settings.appearance_show_beta_badges ? 'checked' : '' }}>
                  </label>
                </div>
              </div>
            </section>

            <div class="d-flex justify-content-end gap-2">
              <a href="{{ path('app_index') }}" class="btn btn-light border">Annuler</a>
              <button type="submit" class="btn btn-success px-4" data-general-settings-target="submitButton">
                <i class="ti ti-device-floppy me-2"></i>Enregistrer les modifications
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
  <style>
    .settings-side-nav {
      position: sticky;
      top: 1rem;
    }

    .settings-nav-list {
      display: flex;
      flex-direction: column;
      gap: .35rem;
    }

    .settings-nav-item {
      color: #4b5563;
      text-decoration: none;
      padding: .8rem 1rem;
      border-radius: .85rem;
      font-weight: 600;
      transition: background-color .2s ease, color .2s ease;
    }

    .settings-nav-item:hover,
    .settings-nav-item.is-active {
      background: #eef5ff;
      color: #111827;
    }

    .module-card {
      display: block;
      border: 1px solid #e5e7eb;
      border-radius: 1rem;
      padding: 1.25rem;
      background: #fff;
      height: 100%;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .module-card.is-enabled {
      border-color: #b7ebc6;
      box-shadow: 0 0 0 1px rgba(34, 197, 94, .08);
    }

    .module-card-header {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }

    .module-icon {
      width: 3rem;
      height: 3rem;
      border-radius: .9rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f3f6fb;
      color: #16a34a;
      font-size: 1.35rem;
      flex-shrink: 0;
    }

    .settings-check {
      display: flex;
      gap: .75rem;
      align-items: flex-start;
    }

    .settings-switch-list {
      border: 1px solid #e5e7eb;
      border-radius: 1rem;
      overflow: hidden;
    }

    .settings-switch-row {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: center;
      padding: 1.25rem;
      border-bottom: 1px solid #eef2f7;
      background: #fff;
    }

    .settings-switch-row:last-child {
      border-bottom: 0;
    }

    [data-general-settings-target="aiSection"].is-disabled {
      opacity: .55;
      pointer-events: none;
    }

    @media (max-width: 1199.98px) {
      .settings-side-nav {
        position: static;
      }
    }
  </style>
{% endblock %}