{% extends 'base.html.twig' %}
{% if profile_form %}
    {% form_theme profile_form 'form/tailadmin_theme.html.twig' %}
{% endif %}
{% form_theme password_form 'form/tailadmin_theme.html.twig' %}
{% if team_form %}
    {% form_theme team_form 'form/tailadmin_theme.html.twig' %}
{% endif %}
{% if favorite_country_form %}
    {% form_theme favorite_country_form 'form/tailadmin_theme.html.twig' %}
{% endif %}
{% if invitation_form %}
    {% form_theme invitation_form 'form/tailadmin_theme.html.twig' %}
{% endif %}
{% if team_setup_form %}
    {% form_theme team_setup_form 'form/tailadmin_theme.html.twig' %}
{% endif %}

{% block title %}Compte et équipe{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/badges.css') }}?v=14">
{% endblock %}

{% block body %}
    <section class="ta-topbar">
        <div>
            <h1 class="ta-page-title">Compte et équipe</h1>
            <p class="ta-page-subtitle">Profil, mot de passe, buteur et paramètres de l’équipe</p>
        </div>
    </section>

    <div class="account-page space-y-6">
        {% if needs_profile_setup %}
            <div class="lpf-alert lpf-alert--warning alert alert-warning text-sm" role="status" data-lpf-alert-dismiss="persist">
                <span>
                    Votre compte existe mais votre <strong>profil joueur</strong> n’est pas encore enregistré.
                    Complétez le formulaire ci-dessous, puis invitez votre partenaire si besoin.
                </span>
            </div>
        {% elseif team is null and not team_setup_form %}
            <div class="lpf-alert lpf-alert--warning alert alert-warning text-sm" role="status" data-lpf-alert-dismiss="persist">
                <span>
                    Aucune équipe n’est associée à ce compte. Contactez un administrateur si le problème persiste.
                </span>
            </div>
        {% endif %}

        <div class="tabs tabs-box account-tabs-nav" role="tablist" aria-label="Sections compte et équipe">
            <button type="button" role="tab" id="tab-btn-compte" class="tab tab-active" aria-selected="true" aria-controls="panel-compte" data-account-tab="compte">
                Mon compte
            </button>
            {% if badges_show_tab %}
            <button type="button" role="tab" id="tab-btn-badges" class="tab" aria-selected="false" aria-controls="panel-badges" data-account-tab="badges">
                Badges
            </button>
            {% endif %}
            {% if team %}
            <button type="button" role="tab" id="tab-btn-equipe" class="tab" aria-selected="false" aria-controls="panel-equipe" data-account-tab="equipe">
                Mon équipe
            </button>
            {% endif %}
            {% if interview_tab_enabled|default(false) %}
            <button type="button" role="tab" id="tab-btn-interview" class="tab" aria-selected="false" aria-controls="panel-interview" data-account-tab="interview">
                Interview
            </button>
            {% endif %}
        </div>

        <div id="panel-compte" role="tabpanel" aria-labelledby="tab-btn-compte" class="account-tab-panel space-y-6">
            <div class="account-profile-password-row">
            {% if profile_form %}
            <section class="account-card-profile rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
                <h2 class="mb-4 text-lg font-semibold">
                    {% if needs_profile_setup %}Créer mon profil joueur{% else %}Profil joueur{% endif %}
                </h2>
                {{ form_start(profile_form, {'attr': {'class': 'space-y-3', 'data-turbo': 'false'}}) }}
                    <div class="form-control w-full">
                        <label class="label">
                            <span class="label-text font-medium">Email</span>
                        </label>
                        <p class="input input-bordered flex h-auto min-h-12 items-center bg-base-200 text-base-content/80">
                            {{ app.user.email }}
                        </p>
                        <p class="label">
                            <span class="label-text-alt text-base-content/60">L’adresse e-mail ne peut pas être modifiée ici.</span>
                        </p>
                    </div>
                    {{ form_row(profile_form.nickname) }}
                    {{ form_row(profile_form.avatarFile) }}
                    <img
                        src="{{ app.user.avatar ?: '' }}"
                        alt=""
                        class="h-16 w-16 rounded-full object-cover {{ app.user.avatar ? '' : 'hidden' }}"
                        data-live-preview-target="avatar"
                    >
                    {{ form_row(profile_form.removeAvatar) }}
                    <button type="submit" class="btn btn-primary">
                        {% if needs_profile_setup %}Créer mon profil{% else %}Enregistrer mon profil{% endif %}
                        <i class="ti ti-device-floppy" aria-hidden="true"></i>
                    </button>
                {{ form_end(profile_form) }}
            </section>
            {% endif %}

            <section class="account-card-password rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
                <h2 class="mb-4 text-lg font-semibold">Mot de passe</h2>
                {{ form_start(password_form, {'attr': {'class': 'space-y-3'}}) }}
                    {{ form_row(password_form.plainPassword) }}
                    <button type="submit" class="btn btn-outline btn-primary">
                        <i class="ti ti-edit" aria-hidden="true"></i>
                        Modifier mon mot de passe
                    </button>
                {{ form_end(password_form) }}
            </section>
            </div>

            {% if has_team_member and not competition_started %}
                <section id="buteur" class="account-buteur-section p-5">
                    <link rel="stylesheet" href="{{ asset('css/buteur-pick.css') }}?v=3">
                    <h2 class="mb-4 text-lg font-semibold">Choisir mon buteur</h2>
                    {% if not cotisation_payee %}
                        <p class="ta-card-text mb-3">Réglez votre cotisation pour pouvoir enregistrer un buteur.</p>
                    {% endif %}

                    <div class="buteur-choice-modes mb-4">
                        <p class="ta-card-text mb-3">Recherche par nom ou sélection visuelle sur le terrain.</p>
                        {% if cotisation_payee %}
                            <a href="{{ path('app_buteur_pick_by_country') }}" class="btn btn-outline btn-primary btn-sm">
                                <i class="ti ti-soccer-field" aria-hidden="true"></i>
                                Choisir sur le terrain par pays
                            </a>
                        {% else %}
                            <button type="button" class="btn btn-outline btn-sm" disabled>
                                Choisir sur le terrain par pays
                            </button>
                        {% endif %}
                    </div>

                    {% include 'buteur/_picker_stack.html.twig' with {
                        picker_id_prefix: 'acc',
                        cotisation_payee: cotisation_payee,
                        dashboard_partners: dashboard_partners,
                        buteurs_pris_par_autres_equipes: buteurs_pris_par_autres_equipes,
                        buteur_stats: buteur_stats|default(null),
                        form_return: 'account',
                    } only %}
                </section>
            {% endif %}

            {% if team_setup_form and not competition_started %}
            <section id="team-setup" class="account-card-team-setup rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
                <h2 class="mb-2 text-lg font-semibold">Créer mon équipe et inviter mon partenaire</h2>
                <p class="ta-card-text mb-3">
                    Vous n’avez pas encore d’équipe. Choisissez un nom d’équipe et envoyez une invitation par e-mail à votre coéquipier.
                </p>
                {{ form_start(team_setup_form, {'attr': {'class': 'space-y-3', 'data-turbo': 'false'}}) }}
                    {{ form_row(team_setup_form.teamName) }}
                    {{ form_row(team_setup_form.teammateEmail) }}
                    <button type="submit" class="btn btn-primary">
                        Créer l’équipe et envoyer l’invitation
                        <i class="ti ti-send" aria-hidden="true"></i>
                    </button>
                {{ form_end(team_setup_form) }}
            </section>
            {% endif %}

            {% if can_invite_teammate and invitation_form and not has_team_member %}
            <section id="invitation" class="account-card-invitation rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
                <h2 class="mb-2 text-lg font-semibold">Inviter mon partenaire</h2>
                {% if pending_invitation %}
                    <p class="ta-card-text mb-3">
                        Invitation en attente pour <strong>{{ pending_invitation.invitedEmail }}</strong>
                        (valable jusqu’au {{ pending_invitation.expiresAt|date('d/m/Y H:i') }}).
                    </p>
                {% else %}
                    <p class="ta-card-text mb-3">
                        Envoyez une invitation par e-mail à votre coéquipier pour qu’il crée son compte et rejoigne l’équipe.
                    </p>
                {% endif %}
                {{ form_start(invitation_form, {'attr': {'class': 'space-y-3', 'data-turbo': 'false'}}) }}
                    {{ form_row(invitation_form.teammateEmail) }}
                    <button type="submit" class="btn btn-primary">
                        {% if pending_invitation %}Renvoyer l’invitation{% else %}Envoyer l’invitation{% endif %}
                        <i class="ti ti-send" aria-hidden="true"></i>
                    </button>
                {{ form_end(invitation_form) }}
            </section>
            {% endif %}

            {% include 'account/_push_notifications_card.html.twig' %}
        </div>

        {% if badges_show_tab %}
        <div id="panel-badges" role="tabpanel" aria-labelledby="tab-btn-badges" class="account-tab-panel space-y-6" hidden>
            {% include 'account/_badges_collection.html.twig' %}
        </div>
        {% endif %}

        {% set equipe_form_submitted = (team_form is defined and team_form and team_form.vars.submitted)
            or (invitation_form is defined and invitation_form and invitation_form.vars.submitted)
            or (favorite_country_form is defined and favorite_country_form and favorite_country_form.vars.submitted) %}

        {% if team %}
        <div id="panel-equipe" role="tabpanel" aria-labelledby="tab-btn-equipe" class="account-tab-panel account-tab-panel--columns" hidden>
            <div class="account-equipe-top-row">
                {% if favorite_country_state %}
                    {% include 'account/_favorite_country_section.html.twig' %}
                {% endif %}
                {% if has_team_member %}
                    {% include 'account/_team_jokers_list.html.twig' %}
                {% endif %}
            </div>

            {# Bloc résumé équipe masqué temporairement #}
            {% if false %}
            <section class="account-card-team-info rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
                <h2 class="mb-2 text-lg font-semibold">Équipe {{ team.name }}</h2>
                {% if team.slogan %}
                    <p class="ta-card-text m-0">{{ team.slogan }}</p>
                {% endif %}
            </section>
            {% endif %}

            {% if can_invite_teammate and invitation_form and has_team_member %}
            <section id="invitation-equipe" class="account-card-invitation rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
                <h2 class="mb-2 text-lg font-semibold">Inviter mon partenaire</h2>
                {% if pending_invitation %}
                    <p class="ta-card-text mb-3">
                        Invitation en attente pour <strong>{{ pending_invitation.invitedEmail }}</strong>
                        (valable jusqu’au {{ pending_invitation.expiresAt|date('d/m/Y H:i') }}).
                    </p>
                {% else %}
                    <p class="ta-card-text mb-3">
                        Envoyez une invitation par e-mail à votre coéquipier pour qu’il crée son compte et rejoigne l’équipe.
                    </p>
                {% endif %}
                {{ form_start(invitation_form, {'attr': {'class': 'space-y-3', 'data-turbo': 'false'}}) }}
                    {{ form_row(invitation_form.teammateEmail) }}
                    <button type="submit" class="btn btn-primary">
                        {% if pending_invitation %}Renvoyer l’invitation{% else %}Envoyer l’invitation{% endif %}
                        <i class="ti ti-send" aria-hidden="true"></i>
                    </button>
                {{ form_end(invitation_form) }}
            </section>
            {% endif %}

            {% if team_form %}
            <section id="team-edit" class="account-card-team-edit rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
                <h2 class="mb-4 text-lg font-semibold">Modifier l’équipe</h2>
                {{ form_start(team_form, {'attr': {'class': 'space-y-3', 'data-turbo': 'false'}}) }}
                    {{ form_row(team_form.name) }}
                    {{ form_row(team_form.logoFile) }}
                    <img
                        src="{{ team.logo ?: '' }}"
                        alt=""
                        class="h-16 w-16 rounded-xl object-cover {{ team.logo ? '' : 'hidden' }}"
                        data-live-preview-target="logo"
                    >
                    {{ form_row(team_form.removeLogo) }}
                    {{ form_row(team_form.slogan) }}
                    <button type="submit" class="btn btn-primary">
                        Enregistrer mon équipe
                        <i class="ti ti-device-floppy" aria-hidden="true"></i>
                    </button>
                {{ form_end(team_form) }}
            </section>
            {% endif %}

            <section class="account-card-team-players rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
                <h3 class="mb-4 text-lg font-semibold">Joueurs de l’équipe</h3>
                <div class="overflow-x-auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Pseudo</th>
                                <th>Email</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for member in team_members %}
                                <tr>
                                    <td>{{ member.nickname }}</td>
                                    <td>{{ member.player.email }}</td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td colspan="2">Aucun joueur inscrit pour le moment.</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
        {% endif %}

        {% if interview_tab_enabled|default(false) %}
        <div id="panel-interview" role="tabpanel" aria-labelledby="tab-btn-interview" class="account-tab-panel space-y-6" hidden>
            {% include 'account/_interview_tab.html.twig' %}
        </div>
        {% endif %}
    </div>

    <script>
        (function initAccountPage() {
            const bindOnce = () => {
                const btnCompte = document.getElementById('tab-btn-compte');
                const btnBadges = document.getElementById('tab-btn-badges');
                const btnEquipe = document.getElementById('tab-btn-equipe');
                const btnInterview = document.getElementById('tab-btn-interview');
                const panelCompte = document.getElementById('panel-compte');
                const panelBadges = document.getElementById('panel-badges');
                const panelEquipe = document.getElementById('panel-equipe');
                const panelInterview = document.getElementById('panel-interview');
                if (!btnCompte || !panelCompte) {
                    return;
                }
                if (btnCompte.dataset.accountTabsBound === '1') {
                    return;
                }
                btnCompte.dataset.accountTabsBound = '1';

                const showTab = (name) => {
                    const isCompte = name === 'compte';
                    const isBadges = name === 'badges' && btnBadges && panelBadges;
                    const isEquipe = name === 'equipe' && btnEquipe && panelEquipe;
                    const isInterview = name === 'interview' && btnInterview && panelInterview;

                    btnCompte.classList.toggle('tab-active', isCompte);
                    btnCompte.setAttribute('aria-selected', isCompte ? 'true' : 'false');
                    panelCompte.toggleAttribute('hidden', !isCompte);

                    if (btnBadges && panelBadges) {
                        btnBadges.classList.toggle('tab-active', isBadges);
                        btnBadges.setAttribute('aria-selected', isBadges ? 'true' : 'false');
                        panelBadges.toggleAttribute('hidden', !isBadges);
                        if (isBadges && window.LpfBadgeUnlock) {
                            window.LpfBadgeUnlock.markAllSeen();
                        }
                    }

                    if (btnEquipe && panelEquipe) {
                        btnEquipe.classList.toggle('tab-active', isEquipe);
                        btnEquipe.setAttribute('aria-selected', isEquipe ? 'true' : 'false');
                        panelEquipe.toggleAttribute('hidden', !isEquipe);
                    }

                    if (btnInterview && panelInterview) {
                        btnInterview.classList.toggle('tab-active', isInterview);
                        btnInterview.setAttribute('aria-selected', isInterview ? 'true' : 'false');
                        panelInterview.toggleAttribute('hidden', !isInterview);
                    }
                };

                const scrollToAnchor = (id) => {
                    const block = document.getElementById(id);
                    if (block) {
                        window.setTimeout(() => {
                            block.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        }, 50);
                    }
                };

                const hashToTab = () => {
                    const h = (window.location.hash || '').toLowerCase();
                    if (h === '#tab-badges' || h === '#badges') {
                        return 'badges';
                    }
                    if (
                        h === '#tab-equipe'
                        || h === '#equipe'
                        || h === '#team-section'
                        || h === '#invitation'
                        || h === '#favorite-country'
                    ) {
                        return 'equipe';
                    }
                    if (h === '#tab-interview' || h === '#interview') {
                        return 'interview';
                    }
                    return 'compte';
                };

                const forceEquipeTab = {{ equipe_form_submitted ? 'true' : 'false' }};

                const applyHash = () => {
                    if (forceEquipeTab && panelEquipe) {
                        showTab('equipe');
                        history.replaceState(null, '', '#tab-equipe');
                        {% if team_form and team_form.vars.submitted %}
                        window.setTimeout(() => scrollToAnchor('team-edit'), 80);
                        {% elseif favorite_country_form is defined and favorite_country_form and favorite_country_form.vars.submitted %}
                        window.setTimeout(() => scrollToAnchor('favorite-country'), 80);
                        {% elseif invitation_form is defined and invitation_form and invitation_form.vars.submitted %}
                        window.setTimeout(() => scrollToAnchor('invitation-equipe'), 80);
                        {% endif %}
                        return;
                    }

                    const h = (window.location.hash || '').toLowerCase();
                    showTab(hashToTab());
                    if (h === '#notifications') {
                        scrollToAnchor('notifications');
                    }
                    if (h === '#buteur') {
                        scrollToAnchor('buteur');
                    }
                    if (h === '#invitation' || h === '#invitation-equipe') {
                        scrollToAnchor(h === '#invitation-equipe' ? 'invitation-equipe' : 'invitation');
                    }
                    if (h === '#favorite-country') {
                        scrollToAnchor('favorite-country');
                    }
                    if (h === '#team-setup') {
                        scrollToAnchor('team-setup');
                    }
                };

                applyHash();

                btnCompte.addEventListener('click', () => {
                    showTab('compte');
                    history.replaceState(null, '', '#tab-compte');
                });
                if (btnBadges) {
                    btnBadges.addEventListener('click', () => {
                        showTab('badges');
                        history.replaceState(null, '', '#tab-badges');
                    });
                }
                if (btnEquipe) {
                    btnEquipe.addEventListener('click', () => {
                        showTab('equipe');
                        history.replaceState(null, '', '#tab-equipe');
                    });
                }
                if (btnInterview) {
                    btnInterview.addEventListener('click', () => {
                        showTab('interview');
                        history.replaceState(null, '', '#tab-interview');
                    });
                }

                window.addEventListener('hashchange', applyHash);

                const bindPreview = (inputName, previewKey) => {
                    const input = document.querySelector(`input[name="${inputName}"]`);
                    const preview = document.querySelector(`[data-live-preview-target="${previewKey}"]`);
                    if (!input || !preview) {
                        return;
                    }
                    input.addEventListener('change', (event) => {
                        const file = event.target.files && event.target.files[0] ? event.target.files[0] : null;
                        if (!file || !file.type.startsWith('image/')) {
                            return;
                        }
                        preview.src = URL.createObjectURL(file);
                        preview.classList.remove('hidden');
                    });
                };

                bindPreview('profile_form[avatarFile]', 'avatar');
                bindPreview('team_form[logoFile]', 'logo');
            };

            if (!window.__lpfAccountTabsListen) {
                window.__lpfAccountTabsListen = true;
                document.addEventListener('turbo:load', bindOnce);
                document.addEventListener('DOMContentLoaded', bindOnce);
            }

            bindOnce();
        })();
    </script>
{% endblock %}