{% extends 'admin/base.html.twig' %}

{% block title %}Tableau de bord{% endblock %}
{% block breadcrumb %}Dashboard{% endblock %}

{% block body %}
<div class="content-header" data-aos="fade-down">
    <h1 class="content-title">Tableau de bord</h1>
    <p class="content-subtitle">Bienvenue dans votre espace d'administration</p>
</div>

{% if success %}
<div class="alert alert-success-modern d-flex align-items-center mb-4" role="alert" data-aos="fade-up">
    <i class="fas fa-check-circle me-3 fs-4"></i>
    <div>
        <strong>Succès !</strong> L'opération a été effectuée avec succès.
    </div>
</div>
{% endif %}

<!-- Stats Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-6 col-xl-3" data-aos="fade-up" data-aos-delay="100">
        <div class="modern-card">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <p class="text-muted mb-1 small text-uppercase fw-semibold">Pages</p>
                    <h3 class="fw-bold mb-0">{{ nbrPages }}</h3>
                </div>
                <div class="rounded-circle p-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="fas fa-file-alt text-white"></i>
                </div>
            </div>
            <p class="text-muted small mb-0">
                <i class="fas fa-arrow-up text-success me-1"></i>
                Total de pages
            </p>
        </div>
    </div>

    <div class="col-md-6 col-xl-3" data-aos="fade-up" data-aos-delay="200">
        <div class="modern-card">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <p class="text-muted mb-1 small text-uppercase fw-semibold">Articles de blog</p>
                    <h3 class="fw-bold mb-0">{{ nbrPosts }}</h3>
                </div>
                <div class="rounded-circle p-3" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <i class="fas fa-blog text-white"></i>
                </div>
            </div>
            <p class="text-muted small mb-0">
                <i class="fas fa-pen text-info me-1"></i>
                Articles publiés
            </p>
        </div>
    </div>

    <div class="col-md-6 col-xl-3" data-aos="fade-up" data-aos-delay="300">
        <div class="modern-card">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <p class="text-muted mb-1 small text-uppercase fw-semibold">Abonnement</p>
                    <h3 class="fw-bold mb-0">
                        {% if site.subscription and site.subscription.plan %}
                            {{ site.subscription.plan.name }}
                        {% else %}
                            <span class="text-muted small">Aucun</span>
                        {% endif %}
                    </h3>
                </div>
                <div class="rounded-circle p-3" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <i class="fas fa-crown text-white"></i>
                </div>
            </div>
            <p class="text-muted small mb-0">
                {% if site.subscription and site.subscription.plan %}
                    {% if site.subscription.plan.priceMonthly == '0.00' %}
                        <i class="fas fa-gift text-success me-1"></i>
                        Plan gratuit
                    {% else %}
                        <i class="fas fa-euro-sign text-primary me-1"></i>
                        {{ site.subscription.plan.priceMonthly }}€/mois
                    {% endif %}
                {% else %}
                    <a href="{{ path('admin_site_subscription_change_plan', {siteId: site.id}) }}" class="text-primary text-decoration-none">
                        <i class="fas fa-arrow-right me-1"></i>Choisir un plan
                    </a>
                {% endif %}
            </p>
        </div>
    </div>

    <div class="col-md-6 col-xl-3" data-aos="fade-up" data-aos-delay="400">
        <div class="modern-card">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <p class="text-muted mb-1 small text-uppercase fw-semibold">Contacts</p>
                    <h3 class="fw-bold mb-0">{{ contacts|length }}</h3>
                </div>
                <div class="rounded-circle p-3" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <i class="fas fa-envelope text-white"></i>
                </div>
            </div>
            <p class="text-muted small mb-0">
                <i class="fas fa-comments text-success me-1"></i>
                Messages reçus
            </p>
        </div>
    </div>
</div>

<!-- SEO Score -->
<div class="row g-4 mb-4">
    <div class="col-lg-8" data-aos="fade-up" data-aos-delay="500">
        <div class="modern-card">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h5 class="fw-bold mb-1">Référencement naturel (SEO)</h5>
                    <p class="text-muted small mb-0">Optimisation de votre visibilité</p>
                </div>
                <div class="badge {% if referencement.referencementTaux >= 100 %}bg-success{% elseif referencement.referencementTaux >= 70 %}bg-warning{% else %}bg-danger{% endif %} px-3 py-2">
                    {{ referencement.referencementTaux|round }}%
                </div>
            </div>

            <!-- Progress Bar -->
            <div class="mb-4">
                <div class="progress" style="height: 12px; border-radius: 50px;">
                    <div class="progress-bar {% if referencement.referencementTaux >= 100 %}bg-success{% elseif referencement.referencementTaux >= 70 %}bg-warning{% else %}bg-danger{% endif %}"
                         role="progressbar"
                         style="width: {{ referencement.referencementTaux|round }}%; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;"
                         aria-valuenow="{{ referencement.referencementTaux|round }}"
                         aria-valuemin="0"
                         aria-valuemax="100"></div>
                </div>
            </div>

            <!-- SEO Details -->
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="d-flex align-items-center p-3 rounded" style="background: #f8f9fa;">
                        <div class="me-3">
                            <div class="rounded-circle p-2" style="background: white; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-heading" style="color: #667eea;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1">
                            <p class="text-muted small mb-1">Titres SEO</p>
                            <h6 class="fw-bold mb-0">{{ referencement.referencementTitleTaux|round }}%</h6>
                        </div>
                        <div class="ms-2">
                            {% if referencement.referencementTitleTaux >= 100 %}
                                <i class="fas fa-check-circle text-success fs-5"></i>
                            {% else %}
                                <i class="fas fa-exclamation-triangle text-warning fs-5"></i>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="d-flex align-items-center p-3 rounded" style="background: #f8f9fa;">
                        <div class="me-3">
                            <div class="rounded-circle p-2" style="background: white; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-align-left" style="color: #764ba2;"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1">
                            <p class="text-muted small mb-1">Descriptions SEO</p>
                            <h6 class="fw-bold mb-0">{{ referencement.referencementDescriptionTaux|round }}%</h6>
                        </div>
                        <div class="ms-2">
                            {% if referencement.referencementDescriptionTaux >= 100 %}
                                <i class="fas fa-check-circle text-success fs-5"></i>
                            {% else %}
                                <i class="fas fa-exclamation-triangle text-warning fs-5"></i>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- SEO Message -->
            <div class="mt-4 p-3 rounded {% if referencement.referencementTaux < 100 %}alert alert-warning{% else %}alert alert-success{% endif %}" style="border-left: 4px solid {% if referencement.referencementTaux < 100 %}#ffc107{% else %}#10b981{% endif %};">
                {% if referencement.referencementTaux < 100 %}
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Optimisez votre référencement :</strong> Renseignez un titre et une description pour chaque page dans l'onglet "Référencement (SEO)".
                {% else %}
                    <i class="fas fa-trophy me-2"></i>
                    <strong>Félicitations !</strong> Votre site est parfaitement optimisé pour le référencement naturel.
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-lg-4" data-aos="fade-up" data-aos-delay="600">
        <div class="modern-card h-100">
            <h5 class="fw-bold mb-4">Actions rapides</h5>
            <div class="d-grid gap-3">
                <a href="{{ path('bo-page-add') }}" class="btn btn-outline-primary text-start">
                    <i class="fas fa-plus-circle me-2"></i>
                    Ajouter une page
                </a>
                <a href="{{ path('bo-global-parameters') }}" class="btn btn-outline-primary text-start">
                    <i class="fas fa-cog me-2"></i>
                    Paramètres du site
                </a>
                <a href="{{ path('admin_site_users', {siteId: site.id}) }}" class="btn btn-outline-primary text-start">
                    <i class="fas fa-users-cog me-2"></i>
                    Gestion des utilisateurs
                </a>
                <a href="{% if site.domainActif and site.domain %}{{ site.domain }}{% else %}{{ app.request.scheme }}://{{ app.request.httpHost }}/site/{{ site.internalName }}{% endif %}" target="_blank" class="btn btn-outline-secondary text-start">
                    <i class="fas fa-external-link-alt me-2"></i>
                    Voir mon site
                </a>
            </div>

            <hr class="my-4">

            <h6 class="fw-bold mb-3">Informations du site</h6>
            <ul class="list-unstyled small">
                <li class="mb-2">
                    <i class="fas fa-globe text-primary me-2"></i>
                    <strong>Nom :</strong> {{ site.name }}
                </li>
                <li class="mb-2">
                    <i class="fas fa-calendar text-success me-2"></i>
                    <strong>Créé le :</strong> {{ site.createdAt|date('d/m/Y') }}
                </li>
                <li class="mb-2">
                    <i class="fas fa-check-circle text-success me-2"></i>
                    <strong>Statut :</strong> Actif
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- Pages Management -->
<div class="row mt-4">
    <div class="col-12">
        <div class="modern-card" data-aos="fade-up">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h5 class="fw-bold mb-1">Gestion des pages</h5>
                    <p class="text-muted small mb-0">Gérez vos {{ nbrPages }} page(s)</p>
                </div>
                <a href="{{ path('bo-page-add') }}" class="btn-gradient">
                    <i class="fas fa-plus me-2"></i>Ajouter une page
                </a>
            </div>

            <div class="table-responsive">
                <table class="table modern-table">
                    <thead>
                        <tr>
                            <th>Nom</th>
                            <th class="text-center">Type</th>
                            <th class="text-center">Menu Header</th>
                            <th class="text-center">Menu Footer</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for page in site.pages %}
                        <tr>
                            <td>
                                <span class="fw-semibold">{{ page.nameMenu }}</span>
                                {% if page.id == site.defaultPage.id|default(0) %}
                                <span class="badge bg-success ms-2">
                                    <i class="fas fa-home me-1"></i>Accueil
                                </span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% set pageName = page.nameMenu|upper %}
                                {% if pageName in ['ACCUEIL', 'HOME'] %}
                                    <span class="badge" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                        <i class="fas fa-home me-1"></i>Accueil
                                    </span>
                                {% elseif pageName in ['PRÉSENTATION', 'PRESENTATION', 'À PROPOS', 'ABOUT'] %}
                                    <span class="badge" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                                        <i class="fas fa-info-circle me-1"></i>Présentation
                                    </span>
                                {% elseif pageName in ['CONTACT', 'CONTACTS'] %}
                                    <span class="badge" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                                        <i class="fas fa-envelope me-1"></i>Contact
                                    </span>
                                {% elseif pageName in ['BLOG', 'ACTUALITÉS', 'ACTUALITES', 'NEWS'] %}
                                    <span class="badge" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                                        <i class="fas fa-blog me-1"></i>Blog
                                    </span>
                                {% elseif pageName in ['TARIFS', 'PRICING', 'PRIX'] %}
                                    <span class="badge" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                                        <i class="fas fa-euro-sign me-1"></i>Tarifs
                                    </span>
                                {% else %}
                                    <span class="badge bg-secondary">
                                        <i class="fas fa-file me-1"></i>{{ page.nameMenu }}
                                    </span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if page.displayMenuHeader %}
                                    <span class="text-success"><i class="fas fa-check-circle"></i></span>
                                {% else %}
                                    <span class="text-muted"><i class="fas fa-times-circle"></i></span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                {% if page.displayMenuFooter %}
                                    <span class="text-success"><i class="fas fa-check-circle"></i></span>
                                {% else %}
                                    <span class="text-muted"><i class="fas fa-times-circle"></i></span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                <div class="btn-group" role="group">
                                    <a href="{{ path('bo-page-presentation-edit-modern', {'id': page.id}) }}"
                                       class="btn btn-sm btn-gradient"
                                       title="Éditer la page"
                                       style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none;">
                                        <i class="fas fa-magic"></i> Éditer
                                    </a>

                                    <button type="button"
                                       class="btn btn-sm btn-outline-danger"
                                       data-bs-toggle="modal"
                                       data-bs-target="#deletePageModal{{ page.id }}"
                                       title="Supprimer">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal de suppression pour chaque page -->
{% for page in site.pages %}
    <div class="modal fade" id="deletePageModal{{ page.id }}" tabindex="-1" aria-labelledby="deletePageModalLabel{{ page.id }}" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="deletePageModalLabel{{ page.id }}">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Confirmer la suppression
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0">Êtes-vous sûr de vouloir supprimer la page <strong>"{{ page.nameMenu }}"</strong> ?</p>
                    <p class="text-muted small mt-2 mb-0">Cette action est irréversible.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Annuler
                    </button>
                    <a href="{{ path('bo-page-remove', {'id': page.id}) }}" class="btn btn-danger">
                        <i class="fas fa-trash me-1"></i> Supprimer
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endfor %}

<!-- Recent Activities -->
{% if quotes|length > 0 or contacts|length > 0 %}
<div class="row g-4 mt-4">
    {% if quotes|length > 0 %}
    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="700">
        <div class="modern-card">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="fw-bold mb-0">Dernières demandes de devis</h5>
                <span class="badge bg-primary">{{ quotes|length }}</span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Nom</th>
                            <th>Email</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for quote in quotes|slice(0, 5) %}
                        <tr>
                            <td>{{ quote.name }}</td>
                            <td><small>{{ quote.email }}</small></td>
                            <td><small class="text-muted">{{ quote.createdAt|date('d/m/Y') }}</small></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    {% if contacts|length > 0 %}
    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="800">
        <div class="modern-card">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="fw-bold mb-0">Derniers messages</h5>
                <span class="badge bg-success">{{ contacts|length }}</span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Nom</th>
                            <th>Email</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for contact in contacts|slice(0, 5) %}
                        <tr>
                            <td>{{ contact.name }}</td>
                            <td><small>{{ contact.email }}</small></td>
                            <td><small class="text-muted">{{ contact.creationDate|date('d/m/Y') }}</small></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endif %}

{% endblock %}