{# ═══════════════════════════════════════════════════════════════════════
   PARTIAL: _charte_js.html.twig
   JavaScript factorisé pour le sélecteur de charte graphique
   
   Variables requises :
   - mockupIds       : liste des IDs de mockup à initialiser (ex: [1, 2, 3] ou ['modify'])
   - packType        : type de pack ('essentiel', 'premium', 'forcevente', 'multi-X')
   - defaultChartes  : objet {mockupId: charteNumber} pour les valeurs par défaut
   ═══════════════════════════════════════════════════════════════════════ #}

<script>
// ========================================================================
// TABLEAU DES 54 CHARTES GRAPHIQUES NUM-ECARD
// ========================================================================
const chartes = {
    1: { name: "Élégance Bordeaux", primary: "#8B1538", secondary: "#D4AF37", label1: "Bordeaux", label2: "Or" },
    2: { name: "Luxe Émeraude", primary: "#0F5132", secondary: "#B8860B", label1: "Émeraude", label2: "Or" },
    3: { name: "Pourpre Royal", primary: "#4A148C", secondary: "#FFD700", label1: "Pourpre", label2: "Or" },
    4: { name: "Océan Profond", primary: "#003F5C", secondary: "#4682B4", label1: "Océan", label2: "Acier" },
    5: { name: "Forêt Premium", primary: "#1B4332", secondary: "#D4A574", label1: "Forêt", label2: "Sable" },
    6: { name: "Terre Chaude", primary: "#CC6633", secondary: "#DAA520", label1: "Terre", label2: "Or" },
    7: { name: "Acier Graphite", primary: "#3C3C3C", secondary: "#00D4FF", label1: "Graphite", label2: "Cyan" },
    8: { name: "Sarcelle Sophistiqué", primary: "#008B8B", secondary: "#FFD700", label1: "Sarcelle", label2: "Or" },
    9: { name: "Ambre Prestige", primary: "#D4AF37", secondary: "#1A1A1A", label1: "Ambre", label2: "Noir" },
    10: { name: "Pouvoir Cramoisi", primary: "#8B0000", secondary: "#000000", label1: "Rouge", label2: "Noir" },
    11: { name: "Nuit Indigo", primary: "#4B0082", secondary: "#FFD700", label1: "Indigo", label2: "Or" },
    12: { name: "Or Rose", primary: "#B76E79", secondary: "#2C2C2C", label1: "Rose", label2: "Charbon" },
    13: { name: "Rayonnement Ambré", primary: "#D4A574", secondary: "#8B6914", label1: "Ambre", label2: "Bronze" },
    14: { name: "Essence Forestière", primary: "#2D5016", secondary: "#8B7355", label1: "Vert", label2: "Bois" },
    15: { name: "Élite Champagne", primary: "#E5D4B5", secondary: "#1C1C1C", label1: "Champagne", label2: "Noir" },
    16: { name: "Autorité Cobalt", primary: "#0047AB", secondary: "#C0C0C0", label1: "Cobalt", label2: "Argent" },
    17: { name: "Héritage Bronze", primary: "#8B4513", secondary: "#D2B48C", label1: "Bronze", label2: "Tan" },
    18: { name: "Fraîcheur Menthe", primary: "#98D8C8", secondary: "#2F6F5E", label1: "Menthe", label2: "Vert" },
    19: { name: "Passion Rubis", primary: "#9B111E", secondary: "#2C1810", label1: "Rubis", label2: "Chocolat" },
    20: { name: "Terre Olive", primary: "#C65D3B", secondary: "#2C5530", label1: "Terre", label2: "Olive" },
    21: { name: "Bordeaux Doré", primary: "#800020", secondary: "#DAA520", label1: "Bordeaux", label2: "Or" },
    22: { name: "Aqua Marine", primary: "#7FFFD4", secondary: "#20B2AA", label1: "Aqua", label2: "Mer" },
    23: { name: "Miel Caramel", primary: "#D4A017", secondary: "#8B4000", label1: "Miel", label2: "Caramel" },
    24: { name: "Minuit Doré", primary: "#191970", secondary: "#FFD700", label1: "Minuit", label2: "Or" },
    25: { name: "Moderne Cyan", primary: "#0F0F1E", secondary: "#00F2FE", label1: "Sombre", label2: "Cyan" },
    26: { name: "Violet Électrique", primary: "#10002B", secondary: "#8338EC", label1: "Violet", label2: "Vif" },
    27: { name: "Feu Orange", primary: "#1A0F00", secondary: "#FF8C00", label1: "Brun", label2: "Orange" },
    28: { name: "Confiance Bleue", primary: "#001219", secondary: "#005F73", label1: "Nuit", label2: "Bleu" },
    29: { name: "Émeraude Naturel", primary: "#081C15", secondary: "#2D6A4F", label1: "Noir", label2: "Vert" },
    30: { name: "Vert Printemps", primary: "#0A1410", secondary: "#059669", label1: "Foncé", label2: "Émeraude" },
    31: { name: "Bleu Royal", primary: "#000814", secondary: "#4169E1", label1: "Nuit", label2: "Royal" },
    32: { name: "Rose Élégant", primary: "#1A1315", secondary: "#B76E79", label1: "Terre", label2: "Rose" },
    33: { name: "Violet Majestueux", primary: "#1A051A", secondary: "#9D4EDD", label1: "Prune", label2: "Violet" },
    34: { name: "Vert Écologique", primary: "#0F1A0F", secondary: "#4CAF50", label1: "Nature", label2: "Vert" },
    35: { name: "Magenta Audacieux", primary: "#1A0A10", secondary: "#FF00FF", label1: "Noir", label2: "Magenta" },
    36: { name: "Bleu Minuit", primary: "#0A0A12", secondary: "#191970", label1: "Nuit", label2: "Bleu" },
    37: { name: "Or Solaire", primary: "#1A1008", secondary: "#DAA520", label1: "Café", label2: "Or" },
    38: { name: "Cyan Océan", primary: "#0A1414", secondary: "#008B8B", label1: "Abysse", label2: "Cyan" },
    39: { name: "Rose Pastel", primary: "#1A0F12", secondary: "#FFB6C1", label1: "Sombre", label2: "Rose" },
    40: { name: "Améthyste Riche", primary: "#0F1028", secondary: "#4B0082", label1: "Indigo", label2: "Violet" },
    41: { name: "Néon Violet", primary: "#000000", secondary: "#BF00FF", label1: "Noir", label2: "Néon" },
    42: { name: "Bordeaux Profond", primary: "#1A0A0F", secondary: "#800020", label1: "Vin", label2: "Rouge" },
    43: { name: "Rose Intense", primary: "#0A0A0A", secondary: "#FF1493", label1: "Noir", label2: "Rose" },
    44: { name: "Rouge Classique", primary: "#000000", secondary: "#FF0000", label1: "Noir", label2: "Rouge" },
    45: { name: "Indigo Mystère", primary: "#0F0F1A", secondary: "#483D8B", label1: "Nuit", label2: "Indigo" },
    46: { name: "Élégance Grise", primary: "#000000", secondary: "#2B2B2B", label1: "Noir", label2: "Gris" },
    47: { name: "Vert Citron", primary: "#0A140A", secondary: "#32CD32", label1: "Foncé", label2: "Citron" },
    48: { name: "Bleu Marine", primary: "#000814", secondary: "#0047AB", label1: "Noir", label2: "Bleu" },
    49: { name: "Bronze Chaleureux", primary: "#1A1008", secondary: "#CD853F", label1: "Café", label2: "Bronze" },
    50: { name: "Pêche Délicate", primary: "#1A1410", secondary: "#FFDAB9", label1: "Chaud", label2: "Pêche" },
    51: { name: "Azur Profond", primary: "#0A1416", secondary: "#00BFFF", label1: "Sombre", label2: "Azur" },
    52: { name: "Lilas Doux", primary: "#1A1A2E", secondary: "#E6E6FA", label1: "Nuit", label2: "Lilas" },
    53: { name: "Lavender Elegance", primary: "#2d1b34", secondary: "#9b59b6", label1: "Prune", label2: "Lavande" },
    54: { name: "Prestige Doré", primary: "#1A1A1A", secondary: "#C9A569", label1: "Noir", label2: "Or" },
    55: { name: "Prestige Marine", primary: "#2c3e50", secondary: "#C9A569", label1: "Marine", label2: "Or" }
};

const chartOrder = [];
for (let i = 1; i <= 55; i++) chartOrder.push(i);

// PackType passé depuis Twig
const _chartePackType = '{{ packType|default("premium") }}';

// État des chartes par mockupId
const currentChartes = {};

// ========================================================================
// INITIALISATION D'UN MOCKUP
// ========================================================================
function initCharteMockup(mockupId, defaultCharte) {
    currentChartes[mockupId] = defaultCharte || 53;

    // Remplir le dropdown
    const select = document.getElementById('charteSelect-' + mockupId);
    if (select && select.options.length === 0) {
        chartOrder.forEach(n => {
            const opt = document.createElement('option');
            opt.value = n;
            opt.textContent = n + '. ' + chartes[n].name;
            if (n === currentChartes[mockupId]) opt.selected = true;
            select.appendChild(opt);
        });
    }

    // Appliquer la charte initiale
    selectCharte(mockupId, currentChartes[mockupId]);
}

// ========================================================================
// SÉLECTION D'UNE CHARTE (fonction universelle)
// ========================================================================
function selectCharte(mockupId, charteNumber) {
    charteNumber = parseInt(charteNumber);
    if (charteNumber < 1) charteNumber = 55;
    if (charteNumber > 55) charteNumber = 1;

    currentChartes[mockupId] = charteNumber;
    const c = chartes[charteNumber];

    // Mettre à jour le dropdown
    const select = document.getElementById('charteSelect-' + mockupId);
    if (select) select.value = charteNumber;

    // Mettre à jour le champ caché du formulaire
    // Essayer par name (wizard Symfony Form)
    const hiddenByName = document.querySelector('[name$="[' + (parseInt(mockupId) - 1) + '][charteTemplate]"]');
    if (hiddenByName) {
        hiddenByName.value = charteNumber;
    }
    // Essayer par ID personnalisé (wizard)
    const hiddenById = document.getElementById('charteTemplate-' + mockupId);
    if (hiddenById) hiddenById.value = charteNumber;
    // Essayer par ID simple (card_modify)
    const hiddenSimple = document.getElementById('charteTemplateHidden');
    if (hiddenSimple) hiddenSimple.value = charteNumber;

    // Mettre à jour l'affichage info
    const charteInfo = document.getElementById('charteInfo-' + mockupId);
    if (charteInfo) {
        const nameEl = charteInfo.querySelector('.charte-name');
        const numberEl = charteInfo.querySelector('.charte-number');
        if (nameEl) nameEl.textContent = c.name;
        if (numberEl) numberEl.textContent = 'Charte ' + charteNumber + ' / 55';
        const swatch1 = charteInfo.querySelector('.color-swatch-1');
        const swatch2 = charteInfo.querySelector('.color-swatch-2');
        const label1 = charteInfo.querySelector('.color-label-1');
        const label2 = charteInfo.querySelector('.color-label-2');
        if (swatch1) swatch1.style.background = c.primary;
        if (swatch2) swatch2.style.background = c.secondary;
        if (label1) label1.textContent = c.label1;
        if (label2) label2.textContent = c.label2;
    }

    // Mettre à jour le mockup
    const mockup = document.getElementById('mockupContent-' + mockupId);
    if (!mockup) return;

    const isFV = (_chartePackType === 'forcevente');

    // Header
    const header = mockup.querySelector('.mockup-header');
    if (header) {
        // Charte 55 "Prestige Marine" : fond sombre fixe #1a252f
        if (charteNumber === 55) {
            header.style.background = `linear-gradient(135deg, ${c.primary} 0%, #1a252f 100%)`;
        } else {
            header.style.background = `linear-gradient(135deg, ${c.primary} 0%, ${c.secondary} 100%)`;
        }
    }

    // Fonction (texte coloré)
    const fonction = mockup.querySelector('.mockup-fonction');
    if (fonction) {
        const brightness = getBrightness(c.primary);
        fonction.style.color = brightness > 150 ? c.primary : c.secondary;
    }

    // Avatar rond (non-FV)
    const avatar = mockup.querySelector('.mockup-avatar');
    if (avatar) {
        avatar.style.background = `linear-gradient(135deg, ${c.primary} 0%, ${c.secondary} 100%)`;
    }

    // Avatar FV (avec bordure)
    const avatarBorder = mockup.querySelector('.mockup-avatar-border');
    if (avatarBorder) {
        avatarBorder.style.borderColor = c.secondary;
        avatarBorder.style.background = `linear-gradient(135deg, ${c.primary} 0%, #1a252f 100%)`;
        const span = avatarBorder.querySelector('span');
        if (span) span.style.color = c.secondary;
    }

    // Logo text (FV)
    const logoText = mockup.querySelector('.mockup-logo-text');
    if (logoText) {
        const brightness = getBrightness(c.primary);
        logoText.style.color = brightness > 150 ? c.primary : c.secondary;
    }

    // Icônes SVG (FV)
    mockup.querySelectorAll('.mockup-icon').forEach(icon => {
        const brightness = getBrightness(c.primary);
        icon.style.color = brightness > 150 ? c.primary : c.secondary;
    });

    // Boutons
    mockup.querySelectorAll('.mockup-btn').forEach(btn => {
        if (!avatarBorder) {
            // Non-FV : boutons colorés
            btn.style.background = `linear-gradient(135deg, ${c.primary} 0%, ${c.secondary} 100%)`;
        }
    });

    // Bouton CTA (FV)
    const ctaBtn = mockup.querySelector('.mockup-cta-btn');
    if (ctaBtn) {
        ctaBtn.style.background = `linear-gradient(135deg, ${c.primary} 0%, ${c.secondary} 100%)`;
    }

    // Footer
    const footer = mockup.querySelector('.mockup-footer');
    if (footer) {
        footer.style.background = `linear-gradient(135deg, ${c.primary} 0%, ${c.secondary} 100%)`;
    }

    // Stats FV
    mockup.querySelectorAll('.mockup-stat').forEach(stat => {
        const brightness = getBrightness(c.primary);
        stat.style.color = brightness > 150 ? c.primary : c.secondary;
    });
}

// ========================================================================
// NAVIGATION
// ========================================================================
function prevCharte(mockupId) {
    const current = currentChartes[mockupId] || 53;
    const idx = chartOrder.indexOf(current);
    const prev = (idx - 1 + chartOrder.length) % chartOrder.length;
    selectCharte(mockupId, chartOrder[prev]);
}

function nextCharte(mockupId) {
    const current = currentChartes[mockupId] || 53;
    const idx = chartOrder.indexOf(current);
    const next = (idx + 1) % chartOrder.length;
    selectCharte(mockupId, chartOrder[next]);
}

// ========================================================================
// UTILITAIRE
// ========================================================================
function getBrightness(hexColor) {
    const r = parseInt(hexColor.slice(1, 3), 16);
    const g = parseInt(hexColor.slice(3, 5), 16);
    const b = parseInt(hexColor.slice(5, 7), 16);
    return (r * 299 + g * 587 + b * 114) / 1000;
}

// ========================================================================
// INITIALISATION AU CHARGEMENT
// ========================================================================
document.addEventListener('DOMContentLoaded', function() {
    {% for id in mockupIds|default([]) %}
        initCharteMockup('{{ id }}', {{ defaultChartes[id]|default(53) }});
    {% endfor %}
});
</script>