{% extends "dashboard/base.html" %}

{% block title %}Google Search Console — Comptoir{% endblock %}

{% block content %}
  <h1 class="text-xl font-bold text-ink">Google Search Console</h1>

  {% if state == "no_account" %}
    <div class="mt-4 max-w-md bg-white border border-ink/18 rounded-lg p-6">
      <p class="text-sm text-ink/55">Connectez d'abord votre compte Google pour activer Search Console.</p>
      <a href="{% url 'google_overview' %}"
         class="mt-4 inline-block px-4 py-2 rounded-md bg-ink text-white text-sm font-semibold hover:bg-ink-dark">
        Aller à la page Google
      </a>
    </div>

  {% elif state == "scope_missing" %}
    <div class="mt-4 max-w-md bg-white border border-ink/18 rounded-lg p-6">
      <p class="text-sm text-ink/55">
        Activez Search Console pour suivre le référencement de votre boutique et envoyer votre sitemap.
      </p>
      <a href="{% url 'google_search_console_activate' %}"
         class="mt-4 inline-block px-4 py-2 rounded-md bg-ink text-white text-sm font-semibold hover:bg-ink-dark">
        Activer Search Console
      </a>
    </div>

  {% elif state == "domain_missing" %}
    <div class="mt-4 max-w-md bg-amber-50 border border-amber-200 rounded-lg p-6">
      <p class="text-sm text-ink/70">
        Renseignez le domaine de votre boutique avant de connecter Search Console.
      </p>
      <a href="{% url 'base_dashboard:theme_identity' %}" class="mt-4 inline-block text-sm font-semibold underline">
        Renseigner le domaine
      </a>
    </div>

  {% elif state == "property_not_found" %}
    <div class="mt-4 max-w-md bg-white border border-ink/18 rounded-lg p-6">
      <p class="text-sm text-ink/55">
        Aucune propriété Search Console existante ne correspond à votre domaine. Nous pouvons en créer une.
      </p>
      <form method="post" action="{% url 'google_search_console_create_property' %}">
        {% csrf_token %}
        <button type="submit"
                class="mt-4 px-4 py-2 rounded-md bg-ink text-white text-sm font-semibold hover:bg-ink-dark">
          Créer la propriété
        </button>
      </form>
    </div>

  {% elif state == "connected_unverified" %}
    <div class="mt-4 max-w-2xl bg-amber-50 border border-amber-200 rounded-lg p-6">
      <p class="text-sm font-semibold text-ink">Propriété ajoutée, vérification requise</p>
      <p class="mt-1 font-semibold text-ink">{{ connection.site_url }}</p>
      <p class="mt-3 text-sm text-ink/70">
        Google a bien enregistré cette propriété, mais refuse encore l'accès aux statistiques
        tant que vous n'avez pas prouvé que vous en êtes propriétaire.
      </p>
    </div>
    {% include "dashboard/google_services/_site_verification_card.html" %}

  {% elif state == "connected" %}
    <div class="mt-4 max-w-2xl bg-white border border-ink/18 rounded-lg p-6">
      <p class="text-sm text-ink/55">Propriété connectée</p>
      <p class="mt-1 font-semibold text-ink">{{ connection.site_url }}</p>

      <p class="mt-4 text-sm text-ink/70">
        {% if indexation %}
          {{ indexation.indexed }} page{{ indexation.indexed|pluralize }} indexée{{ indexation.indexed|pluralize }}
          sur {{ indexation.submitted }} soumise{{ indexation.submitted|pluralize }}.
        {% else %}
          Sitemap pas encore traité par Google — revenez plus tard pour voir le taux d'indexation.
        {% endif %}
      </p>

      <form method="post" action="{% url 'google_search_console_submit_sitemap' %}">
        {% csrf_token %}
        <button type="submit"
                class="mt-4 px-4 py-2 rounded-md bg-ink text-white text-sm font-semibold hover:bg-ink-dark">
          Envoyer le sitemap
        </button>
      </form>
      {% if connection.last_sitemap_submitted_at %}
        <p class="mt-2 text-xs text-ink/45">Dernier envoi : {{ connection.last_sitemap_submitted_at }}</p>
      {% endif %}
    </div>

    <h2 class="mt-6 text-sm font-semibold text-ink/70 uppercase tracking-wide">Requêtes principales (28 derniers jours)</h2>
    <div class="mt-2 max-w-2xl bg-white border border-ink/18 rounded-lg overflow-hidden">
      <table class="w-full">
        <thead>
          <tr class="border-b border-ink/10 bg-paper">
            <th class="text-left px-4 py-2.5 text-[11px] font-bold tracking-wide uppercase text-ink/45">Requête</th>
            <th class="text-center px-4 py-2.5 text-[11px] font-bold tracking-wide uppercase text-ink/45">Clics</th>
            <th class="text-center px-4 py-2.5 text-[11px] font-bold tracking-wide uppercase text-ink/45">Impressions</th>
            <th class="text-center px-4 py-2.5 text-[11px] font-bold tracking-wide uppercase text-ink/45">Position moy.</th>
          </tr>
        </thead>
        <tbody>
          {% for row in top_queries %}
            <tr class="border-b border-ink/10 last:border-0">
              <td class="px-4 py-2.5 text-ink">{{ row.keys.0 }}</td>
              <td class="px-4 py-2.5 text-ink text-center">{{ row.clicks }}</td>
              <td class="px-4 py-2.5 text-ink text-center">{{ row.impressions }}</td>
              <td class="px-4 py-2.5 text-ink text-center">{{ row.position|floatformat:1 }}</td>
            </tr>
          {% empty %}
            <tr><td colspan="4" class="px-4 py-3 text-sm text-ink/55">Pas encore de données.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <h2 class="mt-6 text-sm font-semibold text-ink/70 uppercase tracking-wide">Pages principales (28 derniers jours)</h2>
    <div class="mt-2 max-w-2xl bg-white border border-ink/18 rounded-lg overflow-hidden">
      <table class="w-full">
        <thead>
          <tr class="border-b border-ink/10 bg-paper">
            <th class="text-left px-4 py-2.5 text-[11px] font-bold tracking-wide uppercase text-ink/45">Page</th>
            <th class="text-center px-4 py-2.5 text-[11px] font-bold tracking-wide uppercase text-ink/45">Clics</th>
            <th class="text-center px-4 py-2.5 text-[11px] font-bold tracking-wide uppercase text-ink/45">Impressions</th>
            <th class="text-center px-4 py-2.5 text-[11px] font-bold tracking-wide uppercase text-ink/45">Position moy.</th>
          </tr>
        </thead>
        <tbody>
          {% for row in top_pages %}
            <tr class="border-b border-ink/10 last:border-0">
              <td class="px-4 py-2.5 text-ink break-all">{{ row.keys.0 }}</td>
              <td class="px-4 py-2.5 text-ink text-center">{{ row.clicks }}</td>
              <td class="px-4 py-2.5 text-ink text-center">{{ row.impressions }}</td>
              <td class="px-4 py-2.5 text-ink text-center">{{ row.position|floatformat:1 }}</td>
            </tr>
          {% empty %}
            <tr><td colspan="4" class="px-4 py-3 text-sm text-ink/55">Pas encore de données.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    {% comment %}state ne devrait jamais sortir des valeurs ci-dessus (code review finding
    G4-L8, 2026-08-15) — filet de sécurité plutôt qu'une page blanche sans explication.{% endcomment %}
    <p class="mt-4 text-sm text-ink/55">Une erreur inattendue est survenue — rechargez la page.</p>
  {% endif %}
{% endblock %}