{% extends 'backend/base_back.html.twig' %}

{% block title %}
    Mon Dashboard - SB Admin 2
{% endblock %}

{% block body %}

    <div class="">

        <!-- Titre de la page -->
        <div class="mb-4">
            <h1 class="h3 mb-0 text-gray-800">Ma page</h1>
        </div>

        <div class="w-100 section-bottom" style="min-height: 100vh;">

            <div class="col-lg-8 pe-4" style="overflow-y: auto;">

                <div class="card border-left-primary shadow mb-4 py-2 px-3">
                    <div class="d-flex flex-column flex-sm-row align-items-center justify-content-between">
                        <div class="text-center text-sm-left mb-3 mb-sm-0">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Le lien de ta page est :
                            </div>
                            <a
                                    href="{{ app.request.schemeAndHttpHost }}/{{ app.user.profile.slug }}"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    class="text-decoration-underline text-primary d-block"
                                    id="public-url"
                            >
                                {{ app.request.schemeAndHttpHost }}/{{ app.user.profile.slug }}
                            </a>
                        </div>
                        <button
                                type="button"
                                id="btn-copy-url"
                                class="btn btn-sm btn-primary shadow-sm mt-2 mt-sm-0"
                        >
                            <i class="fas fa-copy fa-sm text-white-50 mr-1"></i>
                            <span class="btn-copy-text">Copier le lien</span>
                        </button>
                    </div>
                </div>
                <!-- Profil utilisateur -->
                <div class="card shadow border-left-primary mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Mon profil</h6>
                    </div>
                    <div class="card-body">
                        <div class="text-center mb-0 mb-sm-4" id="avatar-editor">
                            <avatar-editor></avatar-editor>
                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold d-flex align-items-center mb-2">
                                <i class="fas fa-user text-primary mr-2"></i> Ton nom
                            </label>
                            <div id="name-editor">
                                <name-editor></name-editor>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="font-weight-bold d-flex align-items-center mb-2">
                                <i class="fas fa-briefcase text-primary mr-2"></i> Ton job
                            </label>
                            <div id="job-editor">
                                <job-editor></job-editor>
                            </div>
                        </div>

                        {# Bouton “Ajouter mes réseaux” #}
                        <button
                                type="button"
                                class="btn btn-primary btn-sm rounded shadow px-4 d-inline-flex align-items-center"
                                data-toggle="modal"
                                data-target="#socialModal"
                        >
                            <i class="fas fa-plus mr-2"></i>
                            Ajouter mes réseaux
                        </button>

                        <div id="social-links-preview" class="mt-3 mb-3">
                            <social-links-preview></social-links-preview>

                        </div>
                        <div class="mb-4">
                            <a
                                    href="#"
                                    id="btn-clear-social"
                                    class="text-danger small"
                                    style="text-decoration: underline;"
                                    data-toggle="modal"
                                    data-target="#socialModal"
                                    onclick="event.preventDefault(); window.clearAll && clearAll()"
                            >
                                Supprimer un réseau
                            </a>
                        </div>

                    </div>
                </div>

                <!-- Blocs dynamiques -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Mes blocs</h6>
                    </div>
                    <div class="card-body px-1">
                        <div class="text-center mb-4">
                            <button
                                    type="button"
                                    class="btn btn-primary btn-sm rounded shadow px-4 d-inline-flex align-items-center"
                                    data-toggle="modal"
                                    data-target="#addBlockModal"
                            >
                                <i class="fas fa-plus mr-2"></i>
                                Ajouter un bloc
                            </button>
                        </div>
                        <p class="small text-muted mt-2">
                            💡📢  Maintenez <i class="fas fa-grip-lines"></i>
                            pour déplacer les blocs comme vous le souhaitez
                        </p>
                        <section class="mb-0">
                            <div id="blocks-container" class="container px-0">
                                <!-- Blocs dynamiques injectés ici -->
                            </div>
                        </section>
                    </div>
                </div>

            </div>

            <!-- Colonne droite preview (desktop) -->
            <div class="col-lg-4 mobile-preview d-none d-lg-flex flex-column align-items-center justify-content-start">
                <a
                        href="{{ path('app_theme') }}"
                        class="btn btn-friendly shadow-sm mb-1 d-none d-md-block choose-theme"
                >
                    <i class="fas fa-palette fa-sm text-white-50"></i>
                    Choisir son thème
                </a>
                <phone-preview></phone-preview>
                {% if 'ROLE_PREMIUM' not in app.user.roles %}
                <a
                        href="{{ path('app_premium') }}"
                        class=" d-none d-lg-block hidden-logo"
                >
                    <i class="fas fa-lock text-muted ms-1"></i>
                    Cacher le logo Bluesy
                </a>
                {% endif %}

            </div>
        </div>

        <!-- Bouton "Voir la preview" mobile -->
        <div class="d-md-none fixed-bottom bg-white border-top shadow-sm">
            <div class="d-flex justify-content-center p-2">
                <button
                        type="button"
                        class="btn btn-outline-dark btn-block"
                        data-toggle="modal"
                        data-target="#previewModal"
                >
                    <i class="fas fa-eye mr-2"></i> Voir la preview
                </button>
            </div>
        </div>

        <!-- Modale preview -->
        <div
                class="modal fade"
                id="previewModal"
                tabindex="-1"
                role="dialog"
                aria-labelledby="previewModalLabel"
                aria-hidden="true"
        >
            <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down" role="document">
                <div class="modal-content shadow">
                    <div class="modal-header">
                        <div class="d-flex flex-column">
                            <h5 class="modal-title" id="previewModalLabel">Aperçu mobile</h5>

                        </div>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body d-flex justify-content-center flex-column">
                        <phone-preview></phone-preview>
                        {% if 'ROLE_PREMIUM' not in app.user.roles %}
                        <a
                                href="{{ path('app_premium') }}"
                                class=" d-block d-lg-none hidden-logo"
                        >
                            <i class="fas fa-lock text-muted ms-1"></i>
                            Cacher le logo Bluesy
                        </a>
                        {% endif %}

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

        <!-- Modale réseaux -->
        <div
                class="modal fade"
                id="socialModal"
                tabindex="-1"
                role="dialog"
                aria-labelledby="socialModalLabel"
                aria-hidden="true"
        >
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content shadow">
                    <div class="modal-header">
                        <h5 class="modal-title" id="socialModalLabel">Ajouter tes réseaux sociaux</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <social-links></social-links>
                    </div>

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

        <!-- Modale ajout de bloc -->
        <div
                class="modal fade"
                id="addBlockModal"
                tabindex="-1"
                role="dialog"
                aria-labelledby="addBlockModalLabel"
                aria-hidden="true"
        >
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content shadow">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addBlockModalLabel">Choisir un type de bloc</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="list-group">
                            <button id="btn-add-link" type="button" class="list-group-item list-group-item-action">
                                <i class="fas fa-link text-primary mr-2"></i>Bouton (lien calendly, site internet)
                            </button>
                            <button id="btn-add-citation" type="button" class="list-group-item list-group-item-action">
                                <i class="fas fa-quote-left text-primary mr-2"></i>Légende / Citation
                            </button>
                            <button id="btn-add-image" type="button" class="list-group-item list-group-item-action">
                                <i class="fas fa-image text-info mr-2"></i>Image
                            </button>
                            <button id="btn-add-video" type="button" class="list-group-item list-group-item-action">
                                <i class="fas fa-play-circle text-danger mr-2"></i>Vidéo
                            </button>
{#                            <button type="button" class="list-group-item list-group-item-action">#}
{#                                <i class="fas fa-link text-warning mr-2"></i> Bloc bouton / lien#}
{#                            </button>#}
                            <button id="btn-add-stats" type="button" class="list-group-item list-group-item-action">
                                <i class="fas fa-chart-line text-success mr-2"></i>Chiffres clés
                            </button>
                            <button id="btn-add-texte" type="button" class="list-group-item list-group-item-action">
                                <i class="fas fa-pen-nib text-success mr-2"></i>Texte
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="modal fade" id="limitModal" tabindex="-1" role="dialog" aria-labelledby="limitModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content text-center p-4">
                <div class="modal-header border-0">
                    <h5 class="modal-title w-100" id="limitModalLabel">Limite atteinte 🚫</h5>
                    <button type="button" class="close position-absolute end-0 me-3" data-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">
                        Tu as atteint la limite gratuite de 5&nbsp;blocs.<br>
                        <strong>Supprime-en un</strong> pour pouvoir en ajouter un nouveau<br>
                        ou passe en <a href="/premium">version Premium</a> pour débloquer toutes les possibilités&nbsp;! 🚀
                    </p>
                    <a href="/premium" class="btn btn-primary btn-block">Passer en Premium</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const btn = document.getElementById('btn-copy-url')
            const textSpan = btn.querySelector('.btn-copy-text')
            const url = document.getElementById('public-url')?.href

            if (!btn || !url) return console.warn('Bouton ou URL manquant')

            btn.addEventListener('click', function (e) {
                e.preventDefault()
                navigator.clipboard.writeText(url)
                    .then(() => {
                        btn.classList.add('copied')
                        textSpan.textContent = '✅ Copié !'
                        setTimeout(() => {
                            btn.classList.remove('copied')
                            textSpan.textContent = 'Copier le lien'
                        }, 2000)
                    })
                    .catch(() => {
                        textSpan.textContent = '❌ Erreur'
                    })
            })
        })
    </script>
{% endblock %}