// SCRIPT EQUIPE - Remplacement DOM apres chargement
(function() {
  'use strict';

  // Fonction pour verifier si on est sur la route team
  function isTeamRoute() {
    var path = window.location.pathname;
    return path === '/team' || path === '/team/' || path.startsWith('/team/');
  }

  // Fonction pour verifier et initialiser la page team
  function checkAndInitTeamPage() {
    if (!isTeamRoute()) {
      return;
    }

    // Eviter double initialisation
    if (window.__teamPageInitialized) {
      return;
    }
    window.__teamPageInitialized = true;

    console.log('EQUIPE: Page team detectee, preparation du remplacement DOM');
    initTeamPage();
  }

  // Fonction pour charger un script externe
  function loadScript(src) {
    return new Promise(function(resolve, reject) {
      var script = document.createElement('script');
      script.src = src;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }

  // Fonction pour initialiser la page equipe
  async function initTeamPage() {
    console.log('EQUIPE: Initialisation de la page');
    
    // CSS de la page
    var css = '*{margin:0;padding:0;box-sizing:border-box}' +
      'body{font-family:system-ui,sans-serif;background:#1a4d3a;color:#e0e0e0;padding:20px}' +
      '.container{max-width:1400px;margin:0 auto}' +
      'header{text-align:center;margin-bottom:30px;padding:20px;background:rgba(26,77,58,0.5);border-radius:8px}' +
      'h1{color:#4ade80;margin-bottom:10px}' +
      '.tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}' +
      '.tab-btn{padding:12px 24px;background:rgba(74,222,128,0.2);border:2px solid #4ade80;color:#4ade80;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600}' +
      '.tab-btn:hover{background:rgba(74,222,128,0.3)}' +
      '.tab-btn.active{background:#4ade80;color:#1a4d3a}' +
      '.tab-content{display:none;background:rgba(26,77,58,0.3);border-radius:8px;padding:20px;margin-bottom:20px}' +
      '.tab-content.active{display:block}' +
      '#network-graph{width:100%;height:700px;background:rgba(0,0,0,0.2);border-radius:8px;border:1px solid rgba(74,222,128,0.3)}' +
      '#congestion-matrix{width:100%;height:600px;background:rgba(0,0,0,0.2);border-radius:8px}' +
      '.genesis-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:30px}' +
      '.stat-card{background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.3);border-radius:6px;padding:15px}' +
      '.stat-value{font-size:32px;font-weight:bold;color:#4ade80}' +
      '.stat-label{font-size:14px;color:#a0a0a0;margin-top:5px}' +
      '.member-card{background:rgba(26,77,58,0.5);border:1px solid rgba(74,222,128,0.3);border-radius:6px;padding:15px;margin-bottom:15px}' +
      '.member-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}' +
      '.member-name{font-size:18px;font-weight:bold;color:#4ade80}' +
      '.member-avail{background:rgba(74,222,128,0.2);padding:5px 12px;border-radius:4px;font-size:14px}' +
      '.tech-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}' +
      '.tech-tag{background:rgba(74,222,128,0.2);border:1px solid rgba(74,222,128,0.4);padding:4px 10px;border-radius:4px;font-size:12px}' +
      '.warning-box{background:rgba(255,68,68,0.2);border:1px solid rgba(255,68,68,0.5);border-radius:6px;padding:15px;margin-top:20px}' +
      '.warning-title{color:#ff6b6b;font-weight:bold;margin-bottom:10px}' +
      '.uncovered{background:rgba(255,68,68,0.1);border-left:3px solid #ff6b6b;padding:10px;margin:8px 0;border-radius:4px}' +
      '.legend{display:flex;gap:20px;margin:20px 0;flex-wrap:wrap}' +
      '.legend-item{display:flex;align-items:center;gap:8px}' +
      '.legend-color{width:20px;height:20px;border-radius:4px}' +
      '.loading{text-align:center;padding:40px;color:#4ade80}' +
      '.clickable{cursor:pointer;transition:all 0.2s}' +
      '.clickable:hover{transform:scale(1.02);box-shadow:0 4px 12px rgba(74,222,128,0.3)}' +
      '.profile-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn 0.2s}' +
      '@keyframes fadeIn{from{opacity:0}to{opacity:1}}' +
      '.profile-card{background:#1a4d3a;border:2px solid #4ade80;border-radius:12px;padding:25px;max-width:500px;width:90%;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.5)}' +
      '.profile-card .close-btn{position:absolute;top:15px;right:15px;background:none;border:none;color:#ff6b6b;font-size:28px;cursor:pointer;line-height:1}' +
      '.profile-card .close-btn:hover{color:#ff4444}' +
      '.profile-card h2{color:#4ade80;margin-bottom:5px;font-size:24px}' +
      '.profile-card .role{color:#a0a0a0;font-size:14px;margin-bottom:15px}' +
      '.profile-card .stats{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:20px}' +
      '.profile-card .stat{background:rgba(74,222,128,0.15);padding:8px 12px;border-radius:6px;font-size:13px}' +
      '.profile-card .stat strong{color:#4ade80}' +
      '.profile-card h3{color:#4ade80;font-size:16px;margin:15px 0 10px;border-bottom:1px solid rgba(74,222,128,0.3);padding-bottom:5px}' +
      '.profile-card .skills{display:flex;flex-wrap:wrap;gap:8px}' +
      '.profile-card .skill-tag{padding:5px 10px;border-radius:4px;font-size:12px;background:rgba(74,222,128,0.2);border:1px solid rgba(74,222,128,0.4)}' +
      '.profile-card .skill-tag.expert{background:rgba(74,222,128,0.4);border-color:#4ade80}' +
      '.profile-card .skill-tag.intermediate{background:rgba(57,151,212,0.3);border-color:#3997d4}' +
      '.profile-card .skill-tag.beginner{background:rgba(245,179,54,0.2);border-color:#f5b336}' +
      '.profile-card .interests{display:flex;flex-wrap:wrap;gap:6px}' +
      '.profile-card .interest{background:rgba(136,255,136,0.15);padding:4px 8px;border-radius:4px;font-size:11px;color:#88ff88}' +
      '.profile-card .projects{list-style:none;padding:0}' +
      '.profile-card .projects li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.1);font-size:13px}' +
      '.profile-card .projects li:last-child{border-bottom:none}' +
      '.profile-card .bio{color:#c0c0c0;font-size:13px;line-height:1.5;margin-top:15px;font-style:italic}';

    // HTML de la page
    var html = '<div class="container">' +
      '<header>' +
      '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">' +
      '<a href="/" style="color:#4ade80;text-decoration:none;font-size:18px;font-weight:bold">&#8592; Retour au Radar</a>' +
      '<div></div>' +
      '</div>' +
      '<h1>Equipe & Technologies</h1>' +
      '<p>Visualisation des competences et identification de l\'equipe de genese MVP</p>' +
      '</header>' +
      '<div class="tabs">' +
      '<button class="tab-btn active" data-tab="network">Graphe Reseau</button>' +
      '<button class="tab-btn" data-tab="congestion">Matrice Congestion</button>' +
      '<button class="tab-btn" data-tab="genesis">Equipe Genese MVP</button>' +
      '</div>' +
      '<div id="network-tab" class="tab-content active">' +
      '<div class="legend">' +
      '<div class="legend-item"><div class="legend-color" style="background:#4ade80"></div><span>Adopt</span></div>' +
      '<div class="legend-item"><div class="legend-color" style="background:#3997d4"></div><span>Trial</span></div>' +
      '<div class="legend-item"><div class="legend-color" style="background:#f5b336"></div><span>Assess</span></div>' +
      '<div class="legend-item"><div class="legend-color" style="background:#e5695e"></div><span>Hold</span></div>' +
      '<div class="legend-item"><div class="legend-color" style="background:#88ff88"></div><span>Membres</span></div>' +
      '</div>' +
      '<div id="network-graph"><div class="loading">Chargement du graphe...</div></div>' +
      '</div>' +
      '<div id="congestion-tab" class="tab-content">' +
      '<h2 style="margin-bottom:20px">Matrice de Congestion - Technologies Adopt</h2>' +
      '<div id="congestion-matrix"><div class="loading">Chargement de la matrice...</div></div>' +
      '</div>' +
      '<div id="genesis-tab" class="tab-content">' +
      '<div id="genesis-team"><div class="loading">Chargement des donnees...</div></div>' +
      '</div>' +
      '</div>';

    // Injecter le CSS
    var styleEl = document.createElement('style');
    styleEl.textContent = css;
    document.head.appendChild(styleEl);
    
    // Modifier le titre
    document.title = 'Equipe & Technologies - Laplank';

    // Remplacer le contenu du body
    document.body.innerHTML = html;
    document.body.style.cssText = 'font-family:system-ui,sans-serif;background:#1a4d3a;color:#e0e0e0;padding:20px;margin:0';

    // Ajouter les gestionnaires d'evenements pour les onglets
    document.querySelectorAll('.tab-btn').forEach(function(btn) {
      btn.addEventListener('click', function() {
        var tabName = this.getAttribute('data-tab');
        document.querySelectorAll('.tab-content').forEach(function(t) { t.classList.remove('active'); });
        document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
        document.getElementById(tabName + '-tab').classList.add('active');
        this.classList.add('active');
        
        // Redimensionner les graphiques
        if (tabName === 'congestion' && window.congestionChart) {
          setTimeout(function() { window.congestionChart.resize(); }, 100);
        }
        if (tabName === 'network' && window.networkCy) {
          setTimeout(function() { window.networkCy.resize(); }, 100);
        }
      });
    });

    console.log('EQUIPE: DOM remplace, chargement des bibliotheques...');

    // Charger les bibliotheques externes
    try {
      await loadScript('https://cdn.jsdelivr.net/npm/cytoscape@3.26.0/dist/cytoscape.min.js');
      console.log('EQUIPE: Cytoscape charge');
      // Utilisation du layout cose integre (pas de plugin externe necessaire)
      
      await loadScript('https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js');
      console.log('EQUIPE: ECharts charge');

      // Charger les donnees
      var response = await fetch('/team-visualization-data.json');
      if (!response.ok) throw new Error('HTTP ' + response.status);
      var data = await response.json();
      console.log('EQUIPE: Donnees chargees:', Object.keys(data));

      // Stocker les profils pour acces global
      window.__memberProfiles = data.memberProfiles || {};

      // Initialiser les visualisations
      initNetwork(data);
      initCongestion(data);
      initGenesis(data);

    } catch (e) {
      console.error('EQUIPE: Erreur:', e);
      var errorMsg = '<div style="padding:20px;background:rgba(255,152,0,0.2);border:1px solid #ff9800;border-radius:8px"><h3 style="color:#ff9800">Erreur de chargement</h3><p>' + e.message + '</p></div>';
      document.getElementById('network-graph').innerHTML = errorMsg;
      document.getElementById('congestion-matrix').innerHTML = errorMsg;
      document.getElementById('genesis-team').innerHTML = errorMsg;
    }
  }

  // Graphe reseau avec Cytoscape
  function initNetwork(data) {
    if (!data || !data.network) {
      document.getElementById('network-graph').innerHTML = '<div class="loading">Pas de donnees reseau</div>';
      return;
    }
    
    window.networkCy = cytoscape({
      container: document.getElementById('network-graph'),
      elements: data.network,
      style: [
        {
          selector: 'node[type="technology"]',
          style: {
            'background-color': 'data(color)',
            'label': 'data(label)',
            'width': function(e) { return 30 + (e.data('coverage') || 0) * 8; },
            'height': function(e) { return 30 + (e.data('coverage') || 0) * 8; },
            'color': '#fff',
            'font-size': '12px',
            'text-outline-width': 2,
            'text-outline-color': '#000',
            'text-wrap': 'wrap',
            'text-max-width': 100
          }
        },
        {
          selector: 'node[type="member"]',
          style: {
            'background-color': '#88ff88',
            'label': 'data(label)',
            'width': function(e) { return 35 + (e.data('availability') || 0) / 2; },
            'height': function(e) { return 35 + (e.data('availability') || 0) / 2; },
            'color': '#fff',
            'font-size': '14px',
            'font-weight': 'bold',
            'text-outline-width': 2,
            'text-outline-color': '#000',
            'shape': 'ellipse'
          }
        },
        {
          selector: 'edge',
          style: {
            'width': function(e) { return 1 + (e.data('weight') || 0.5); },
            'line-color': '#999',
            'opacity': 0.6,
            'curve-style': 'bezier'
          }
        }
      ],
      layout: {
        name: 'cose',
        nodeDimensionsIncludeLabels: true,
        idealEdgeLength: 100,
        nodeRepulsion: 4500,
        gravity: 0.25,
        numIter: 1000,
        animate: true,
        animationDuration: 800
      }
    });
    
    // Ajouter evenement de clic sur les membres
    window.networkCy.on('tap', 'node[type="member"]', function(evt) {
      var node = evt.target;
      var memberId = node.data('id').replace('member-', '');
      if (window.__memberProfiles && window.__memberProfiles[memberId]) {
        showMemberProfile(memberId, window.__memberProfiles[memberId]);
      }
    });
    
    // Style curseur pour les membres
    window.networkCy.on('mouseover', 'node[type="member"]', function() {
      document.body.style.cursor = 'pointer';
    });
    window.networkCy.on('mouseout', 'node[type="member"]', function() {
      document.body.style.cursor = 'default';
    });
    
    console.log('EQUIPE: Graphe reseau initialise');
  }

  // Matrice de congestion avec ECharts
  function initCongestion(data) {
    if (!data || !data.congestionMatrix || data.congestionMatrix.length === 0) {
      document.getElementById('congestion-matrix').innerHTML = '<div class="loading">Pas de donnees matrice</div>';
      return;
    }

    var chart = echarts.init(document.getElementById('congestion-matrix'));
    window.congestionChart = chart;

    var techs = data.congestionMatrix.map(function(r) { return r.technology; });
    var members = data.congestionMatrix[0] ? data.congestionMatrix[0].members.map(function(m) { return m.fullName || m.member; }) : [];
    var scatter = [];

    data.congestionMatrix.forEach(function(row, i) {
      row.members.forEach(function(m, j) {
        if (m.hasSkill) {
          scatter.push({
            value: [j, i],
            member: m.fullName || m.member,
            memberId: m.member,
            tech: row.technology,
            availability: m.availability
          });
        }
      });
    });

    chart.setOption({
      title: { text: 'Disponibilite des membres sur les technologies Adopt', left: 'center', textStyle: { color: '#e0e0e0' } },
      tooltip: {
        formatter: function(p) {
          return p.data.member + '<br/>Tech: ' + p.data.tech + '<br/>Dispo: ' + p.data.availability + '%';
        }
      },
      grid: { height: '60%', top: '15%' },
      xAxis: { type: 'category', data: members, axisLabel: { rotate: 45, color: '#e0e0e0' }, axisLine: { lineStyle: { color: '#4ade80' } } },
      yAxis: { type: 'category', data: techs, axisLabel: { color: '#e0e0e0' }, axisLine: { lineStyle: { color: '#4ade80' } } },
      visualMap: { min: 0, max: 100, calculable: true, orient: 'horizontal', left: 'center', bottom: '5%', inRange: { color: ['#1a4d3a', '#4ade80', '#86efac'] }, textStyle: { color: '#e0e0e0' } },
      series: [{
        type: 'scatter',
        data: scatter,
        symbolSize: function(d) { return 15 + (d[2] || 0) / 2; },
        itemStyle: { color: '#4ade80', borderColor: '#1a4d3a', borderWidth: 2 },
        label: { show: true, formatter: function(p) { return p.data.availability + '%'; }, color: '#1a4d3a' }
      }]
    });

    window.addEventListener('resize', function() { chart.resize(); });
    
    // Ajouter evenement de clic sur les points (membres)
    chart.on('click', function(params) {
      if (params.data && params.data.memberId) {
        var memberId = params.data.memberId;
        if (window.__memberProfiles && window.__memberProfiles[memberId]) {
          showMemberProfile(memberId, window.__memberProfiles[memberId]);
        }
      }
    });
    
    console.log('EQUIPE: Matrice de congestion initialisee');
  }

  // Equipe de genese
  function initGenesis(data) {
    if (!data || !data.genesisTeam) {
      document.getElementById('genesis-team').innerHTML = '<div class="loading">Pas de donnees equipe</div>';
      return;
    }

    var g = data.genesisTeam;
    var h = '<div class="genesis-stats">' +
      '<div class="stat-card"><div class="stat-value">' + g.totalMembers + '</div><div class="stat-label">Membres selectionnes</div></div>' +
      '<div class="stat-card"><div class="stat-value">' + g.totalCapacity + '%</div><div class="stat-label">Capacite totale</div></div>' +
      '<div class="stat-card"><div class="stat-value">' + g.averageAvailability + '%</div><div class="stat-label">Disponibilite moyenne</div></div>' +
      '<div class="stat-card"><div class="stat-value">' + g.coveredTechnologies + '/' + g.totalCoreTechnologies + '</div><div class="stat-label">Technologies couvertes</div></div>' +
      '</div>' +
      '<h2 style="margin-bottom:20px;color:#4ade80">Membres de l\'equipe de genese</h2>';

    if (g.team && g.team.length > 0) {
      g.team.forEach(function(m) {
        h += '<div class="member-card clickable" data-member-id="' + m.member + '">' +
          '<div class="member-header">' +
          '<div><div class="member-name">' + (m.fullName || m.member) + '</div>' +
          '<div style="font-size:12px;color:#a0a0a0;margin-top:4px">' + (m.role || '') + ' - ' + m.seniority + ' - ' + m.coverage + ' technologie(s)</div>' +
          '</div>' +
          '<div class="member-avail">' + m.availability + '% dispo</div>' +
          '</div>' +
          '<div class="tech-list">';
        if (m.technologies) {
          m.technologies.forEach(function(t) {
            h += '<span class="tech-tag">' + t.title + '</span>';
          });
        }
        h += '</div></div>';
      });
    } else {
      h += '<p style="color:#a0a0a0">Aucun membre ne repond aux criteres.</p>';
    }

    if (g.uncoveredTechnologies && g.uncoveredTechnologies.length > 0) {
      h += '<div class="warning-box"><div class="warning-title">Technologies Adopt non couvertes</div><p style="margin-bottom:10px">Ces technologies critiques ne sont pas maitrisees :</p>';
      g.uncoveredTechnologies.forEach(function(t) {
        h += '<div class="uncovered"><strong>' + t.title + '</strong><div style="font-size:12px;color:#a0a0a0;margin-top:4px">Impact: ' + t.businessImpact + ' - Gap: ' + t.skillGap + ' - Couverture: ' + t.teamCoverage + ' personne(s)</div></div>';
      });
      h += '</div>';
    }

    document.getElementById('genesis-team').innerHTML = h;
    
    // Ajouter les evenements de clic sur les cartes membres
    document.querySelectorAll('.member-card.clickable').forEach(function(card) {
      card.addEventListener('click', function() {
        var memberId = this.getAttribute('data-member-id');
        if (memberId && window.__memberProfiles && window.__memberProfiles[memberId]) {
          showMemberProfile(memberId, window.__memberProfiles[memberId]);
        }
      });
    });
    
    console.log('EQUIPE: Equipe de genese initialisee');
  }

  // Afficher la carte de profil d'un membre
  function showMemberProfile(memberId, profile) {
    if (!profile) {
      console.warn('EQUIPE: Profil non trouve pour', memberId);
      return;
    }
    
    // Generer le HTML des competences
    var skillsHtml = '';
    if (profile.skillsDetailed && profile.skillsDetailed.length > 0) {
      skillsHtml = profile.skillsDetailed.map(function(s) {
        var levelClass = s.level || 'beginner';
        var yearsText = s.years ? ' (' + s.years + ' ans)' : '';
        return '<span class="skill-tag ' + levelClass + '">' + s.name + yearsText + '</span>';
      }).join('');
    }
    
    // Generer le HTML des interets
    var interestsHtml = '';
    if (profile.interests && profile.interests.length > 0) {
      interestsHtml = profile.interests.map(function(i) {
        return '<span class="interest">' + i + '</span>';
      }).join('');
    }
    
    // Generer le HTML des projets
    var projectsHtml = '';
    if (profile.projects && profile.projects.length > 0) {
      projectsHtml = '<ul class="projects">' + profile.projects.map(function(p) {
        return '<li>' + p + '</li>';
      }).join('') + '</ul>';
    }
    
    // Generer le HTML des soft skills
    var softSkillsHtml = '';
    if (profile.softSkills && profile.softSkills.length > 0) {
      softSkillsHtml = profile.softSkills.map(function(s) {
        return '<span class="interest">' + s + '</span>';
      }).join('');
    }
    
    var modal = document.createElement('div');
    modal.className = 'profile-modal';
    modal.innerHTML = 
      '<div class="profile-card">' +
        '<button class="close-btn">&times;</button>' +
        '<h2>' + (profile.fullName || memberId) + '</h2>' +
        '<p class="role">' + (profile.role || 'Membre de l\'equipe') + '</p>' +
        '<div class="stats">' +
          '<span class="stat"><strong>' + (profile.availability || 0) + '%</strong> disponibilite</span>' +
          '<span class="stat"><strong>' + (profile.yearsExperience || 0) + '</strong> ans exp.</span>' +
          '<span class="stat"><strong>' + (profile.seniorityLevel || 'beginner') + '</strong></span>' +
          (profile.joinDate ? '<span class="stat">Depuis <strong>' + profile.joinDate + '</strong></span>' : '') +
        '</div>' +
        (skillsHtml ? '<h3>Competences techniques</h3><div class="skills">' + skillsHtml + '</div>' : '') +
        (interestsHtml ? '<h3>Centres d\'interet</h3><div class="interests">' + interestsHtml + '</div>' : '') +
        (softSkillsHtml ? '<h3>Soft Skills</h3><div class="interests">' + softSkillsHtml + '</div>' : '') +
        (projectsHtml ? '<h3>Projets</h3>' + projectsHtml : '') +
        (profile.bio ? '<p class="bio">' + profile.bio + '</p>' : '') +
      '</div>';
    
    // Fermer au clic sur le fond ou le bouton
    modal.addEventListener('click', function(e) {
      if (e.target === modal || e.target.classList.contains('close-btn')) {
        modal.remove();
      }
    });
    
    // Fermer avec Echap
    var escHandler = function(e) {
      if (e.key === 'Escape') {
        modal.remove();
        document.removeEventListener('keydown', escHandler);
      }
    };
    document.addEventListener('keydown', escHandler);
    
    document.body.appendChild(modal);
    console.log('EQUIPE: Profil affiche pour', memberId);
  }

  // Demarrer quand le DOM est pret
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', checkAndInitTeamPage);
  } else {
    checkAndInitTeamPage();
  }

  // Detecter les navigations Next.js (SPA)
  var lastUrl = location.href;
  new MutationObserver(function() {
    if (location.href !== lastUrl) {
      lastUrl = location.href;
      window.__teamPageInitialized = false;
      checkAndInitTeamPage();
    }
  }).observe(document, { subtree: true, childList: true });
})();
