{% extends '@Commercial/commercial/layout.html.twig' %}
{% block commercial_title %}Google Calendar{% endblock %}
{% block commercial_content %}
<div class="calendar-settings" data-controller="calendar-settings" data-calendar-settings-csrf-value="{{ csrf_token('commercial_calendar') }}">
  <header class="calendar-header">
    <div><span class="calendar-eyebrow">Calendrier commercial</span><h1>Connexion Google Calendar</h1><p>Choisissez précisément ce qui est importé et exporté.</p></div>
    <a class="btn btn-outline-secondary" href="{{ path('commercial_calendar_index') }}"><i class="ti ti-arrow-left"></i> Retour au calendrier</a>
  </header>
  {% for label, messages in app.flashes %}{% for message in messages %}<div class="alert alert-{{ label }}">{{ message }}</div>{% endfor %}{% endfor %}

  <section class="settings-card">
    {% if googleAccount and googleAccount.connected %}
      <div class="google-account">
        <span class="google-account-icon"><i class="ti ti-brand-google"></i></span>
        <div><strong>{{ googleAccount.googleAccountEmail }}</strong><small>Connecté {{ googleAccount.lastConnectedAt ? googleAccount.lastConnectedAt|date('d/m/Y à H:i') : '' }}</small></div>
        <form method="post" action="{{ path('commercial_calendar_google_disconnect') }}">
          <input type="hidden" name="_token" value="{{ csrf_token('calendar_google_disconnect') }}">
          <button class="btn btn-outline-danger" type="submit">Déconnecter</button>
        </form>
      </div>
      <div class="settings-actions">
        <button class="btn btn-outline-primary" type="button" data-url="{{ path('commercial_calendar_google_calendars') }}" data-action="calendar-settings#refresh">Actualiser la liste</button>
        <form method="post" action="{{ path('commercial_calendar_google_sync_all') }}"><input type="hidden" name="_token" value="{{ csrf_token('calendar_google_sync') }}"><button class="btn btn-primary">Lancer la synchronisation</button></form>
      </div>
    {% else %}
      <div class="google-connect-empty"><i class="ti ti-brand-google"></i><h2>Connectez votre compte Google</h2><p>Les jetons sont chiffrés et ne sont jamais envoyés au navigateur.</p><a class="btn btn-primary" href="{{ path('commercial_calendar_google_connect') }}">Connecter Google Calendar</a></div>
    {% endif %}
  </section>

  {% if googleAccount and googleAccount.connected %}
  <section class="settings-card">
    <h2>Calendriers disponibles</h2>
    <div class="calendar-source-list">
      {% for source in calendarSources %}
        <form class="calendar-source-row" data-action="change->calendar-settings#save" data-calendar-settings-url="{{ path('commercial_calendar_google_calendar_settings', {id: source.id}) }}">
          <span class="calendar-source-color" style="--source-color: {{ source.color }}"></span>
          <div class="calendar-source-name"><strong>{{ source.name }}</strong><small>{{ source.accessRole }}{% if source.primary %} · principal{% endif %}</small></div>
          <label>Synchronisation<select name="syncDirection">
            <option value="disabled" {{ source.syncDirection == 'disabled' ? 'selected' : '' }}>Désactivée</option>
            <option value="read_only" {{ source.syncDirection == 'read_only' ? 'selected' : '' }}>Google → Capsule</option>
            {% if source.accessRole in ['owner', 'writer'] %}
              <option value="write_only" {{ source.syncDirection == 'write_only' ? 'selected' : '' }}>Capsule → Google</option>
              <option value="two_way" {{ source.syncDirection == 'two_way' ? 'selected' : '' }}>Bidirectionnelle</option>
            {% endif %}
          </select></label>
          <label class="calendar-switch"><input type="checkbox" name="defaultForAppointments" value="1" {{ source.defaultForAppointments ? 'checked' : '' }}> RDV par défaut</label>
          <label class="calendar-switch"><input type="checkbox" name="defaultForTasks" value="1" {{ source.defaultForTasks ? 'checked' : '' }}> Tâches par défaut</label>
          <span class="source-save-state" aria-live="polite"></span>
        </form>
      {% else %}<p class="text-muted">Actualisez la liste pour récupérer vos calendriers Google.</p>{% endfor %}
    </div>
  </section>
  {% endif %}

  <section class="settings-card"><h2>Journal de synchronisation</h2><div class="sync-log-list">
    {% for log in syncLogs %}<article><span class="sync-log-level {{ log.level }}"></span><div><strong>{{ log.message }}</strong><small>{{ log.createdAt|date('d/m/Y H:i:s') }} · {{ log.action }}</small></div></article>
    {% else %}<p class="text-muted">Aucune synchronisation enregistrée.</p>{% endfor %}
  </div></section>
</div>
{% endblock %}