<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Équipe & Technologies - Laplank</title>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape@3.26.0/dist/cytoscape.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-cose-bilkent@4.1.0/cytoscape-cose-bilkent.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script>
    console.log('🔧 TEAM.HTML: Scripts externes chargés');
    console.log('🔧 Cytoscape disponible:', typeof cytoscape !== 'undefined');
    console.log('🔧 ECharts disponible:', typeof echarts !== 'undefined');
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 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-button {
      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;
      transition: all 0.3s;
    }
    
    .tab-button:hover {
      background: rgba(74, 222, 128, 0.3);
    }
    
    .tab-button.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-team {
      padding: 20px;
    }
    
    .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-availability {
      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-tech {
      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;
    }
  </style>
</head>
<body>
  <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;">← Retour au Radar</a>
        <div></div>
      </div>
      <h1>👥 Équipe & Technologies</h1>
      <p>Visualisation des compétences et identification de l'équipe de genèse MVP</p>
    </header>
    
    <div class="tabs">
      <button class="tab-button active" onclick="showTab('network')">Graphe Réseau</button>
      <button class="tab-button" onclick="showTab('congestion')">Matrice Congestion</button>
      <button class="tab-button" onclick="showTab('genesis')">Équipe Genèse MVP</button>
    </div>
    
    <div id="network-tab" class="tab-content active">
      <div class="legend">
        <div class="legend-item">
          <div class="legend-color" style="background: #ff4444;"></div>
          <span>Core (Critique)</span>
        </div>
        <div class="legend-item">
          <div class="legend-color" style="background: #ff8800;"></div>
          <span>Strategic</span>
        </div>
        <div class="legend-item">
          <div class="legend-color" style="background: #4488ff;"></div>
          <span>Support</span>
        </div>
        <div class="legend-item">
          <div class="legend-color" style="background: #88ff88;"></div>
          <span>Membres</span>
        </div>
      </div>
      <div id="network-graph"></div>
    </div>
    
    <div id="congestion-tab" class="tab-content">
      <h2 style="margin-bottom: 20px;">Matrice de Congestion - Technologies Core</h2>
      <div id="congestion-matrix"></div>
    </div>
    
    <div id="genesis-tab" class="tab-content">
      <div id="genesis-team">
        <div class="loading">Chargement des données...</div>
      </div>
    </div>
  </div>
  
  <script>
    console.log('🚀 TEAM.HTML: Script chargé, initialisation...');

    let data = null;
    let networkCy = null;
    let congestionChart = null;
    
    console.log('📋 TEAM.HTML: Fonction loadData() appelée');

    // Charger les données
    async function loadData() {
      try {
        console.log('🔄 Chargement des données équipe depuis /team-visualization-data.json');
        const response = await fetch('/team-visualization-data.json');
        console.log('📡 Réponse reçue:', response.status, response.statusText);

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        data = await response.json();
        console.log('✅ Données chargées:', Object.keys(data));
        console.log('📊 Nombre de nœuds réseau:', data.network?.nodes?.length || 0);
        console.log('📊 Données matrice congestion:', data.congestionMatrix?.length || 0);
        console.log('📊 Données équipe genèse:', data.genesisTeam ? 'présentes' : 'absentes');

        initVisualizations();
      } catch (error) {
        console.error('❌ Erreur lors du chargement des données:', error);

        // Fallback : afficher un message d'information si les données ne se chargent pas
        const fallbackMessage = `
          <div style="padding: 20px; background: rgba(255, 152, 0, 0.1); border: 1px solid #ff9800; border-radius: 8px; margin: 20px 0;">
            <h3 style="color: #ff9800; margin-top: 0;">🔄 Chargement des données...</h3>
            <p>Les visualisations équipe se chargent. Si elles n'apparaissent pas :</p>
            <ul>
              <li>Vérifiez la console du navigateur (F12) pour les erreurs</li>
              <li>Assurez-vous que <code>team-visualization-data.json</code> est accessible</li>
              <li>Le script <code>generate-team-visualization-data.js</code> doit avoir été exécuté</li>
            </ul>
            <p><strong>Erreur détectée :</strong> ${error.message}</p>
          </div>
        `;

        // Afficher le message de fallback dans toutes les sections
        document.getElementById('network-graph').innerHTML = fallbackMessage;
        document.getElementById('congestion-matrix').innerHTML = fallbackMessage;
        document.getElementById('genesis-team').innerHTML = fallbackMessage;
      }
    }
    
    // Initialiser les visualisations
    function initVisualizations() {
      console.log('🎨 TEAM.HTML: initVisualizations() appelée');
      initNetworkGraph();
      initCongestionMatrix();
      initGenesisTeam();
    }
    
    // Graphe réseau
    function initNetworkGraph() {
      console.log('📊 TEAM.HTML: initNetworkGraph() appelée');
      if (!data || !data.network) {
        console.log('⚠️ TEAM.HTML: Pas de données réseau');
        return;
      }
      
      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(ele) {
                const coverage = ele.data('coverage') || 0;
                return Math.max(30, 30 + (coverage * 8));
              },
              'height': function(ele) {
                const coverage = ele.data('coverage') || 0;
                return Math.max(30, 30 + (coverage * 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(ele) {
                const availability = ele.data('availability') || 0;
                return Math.max(25, 25 + (availability / 3));
              },
              'height': function(ele) {
                const availability = ele.data('availability') || 0;
                return Math.max(25, 25 + (availability / 3));
              },
              'color': '#1a4d3a',
              'font-size': '11px',
              'font-weight': 'bold',
              'shape': 'ellipse'
            }
          },
          {
            selector: 'edge',
            style: {
              'width': function(ele) {
                return 1 + (ele.data('weight') || 0.5);
              },
              'line-color': '#999',
              'opacity': 0.6,
              'curve-style': 'bezier'
            }
          }
        ],
        layout: {
          name: 'cose-bilkent',
          nodeDimensionsIncludeLabels: true,
          idealEdgeLength: 100,
          nodeRepulsion: 4500,
          nestingFactor: 0.1,
          gravity: 0.25,
          numIter: 2500,
          tile: true,
          animate: true,
          animationDuration: 1000
        }
      });
      
      // Tooltip sur survol
      networkCy.on('mouseover', 'node', function(evt) {
        const node = evt.target;
        const data = node.data();
        let tooltip = '';
        
        if (data.type === 'technology') {
          tooltip = `${data.label}\n` +
                    `Ring: ${data.ring}\n` +
                    `Couverture: ${data.coverage} personne(s)\n` +
                    `Impact: ${data.businessImpact}\n` +
                    `Gap: ${data.skillGap}`;
        } else {
          tooltip = `${data.label}\n` +
                    `Disponibilité: ${data.availability}%\n` +
                    `Niveau: ${data.seniority}\n` +
                    (data.role ? `Rôle: ${data.role}` : '');
        }
        
        node.tooltip = tooltip;
      });
    }
    
    // Matrice de congestion
    function initCongestionMatrix() {
      console.log('📈 TEAM.HTML: initCongestionMatrix() appelée');
      if (!data || !data.congestionMatrix) {
        console.log('⚠️ TEAM.HTML: Pas de données matrice congestion');
        return;
      }
      
      const chart = echarts.init(document.getElementById('congestion-matrix'));
      congestionChart = chart;
      
      const techs = data.congestionMatrix.map(r => r.technology);
      const members = data.congestionMatrix[0]?.members.map(m => m.fullName || m.member) || [];
      
      const heatmapData = [];
      const scatterData = [];
      
      data.congestionMatrix.forEach((row, i) => {
        row.members.forEach((member, j) => {
          if (member.hasSkill) {
            heatmapData.push([j, i, member.availability]);
            scatterData.push({
              value: [j, i],
              member: member.fullName || member.member,
              tech: row.technology,
              availability: member.availability
            });
          }
        });
      });
      
      const option = {
        title: {
          text: 'Disponibilité des membres sur les technologies Core',
          left: 'center',
          textStyle: { color: '#e0e0e0' }
        },
        tooltip: {
          formatter: function(params) {
            if (params.data && params.data.member) {
              return `${params.data.member}<br/>` +
                     `Technologie: ${params.data.tech}<br/>` +
                     `Disponibilité: ${params.data.availability}%`;
            }
            return '';
          }
        },
        grid: {
          height: '60%',
          top: '15%'
        },
        xAxis: {
          type: 'category',
          data: members,
          axisLabel: { 
            rotate: 45,
            color: '#e0e0e0',
            fontSize: 11
          },
          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: [{
          name: 'Disponibilité',
          type: 'scatter',
          data: scatterData,
          symbolSize: function(data) {
            return 15 + (data[2] || 0) / 2;
          },
          itemStyle: {
            color: '#4ade80',
            borderColor: '#1a4d3a',
            borderWidth: 2
          },
          label: {
            show: true,
            formatter: function(params) {
              return params.data.availability + '%';
            },
            color: '#1a4d3a',
            fontSize: 10
          }
        }]
      };
      
      chart.setOption(option);
      
      // Redimensionner au resize
      window.addEventListener('resize', () => chart.resize());
    }
    
    // Équipe de genèse
    function initGenesisTeam() {
      console.log('👥 TEAM.HTML: initGenesisTeam() appelée');
      if (!data || !data.genesisTeam) {
        console.log('⚠️ TEAM.HTML: Pas de données équipe genèse');
        return;
      }
      
      const genesis = data.genesisTeam;
      const html = `
        <div class="genesis-stats">
          <div class="stat-card">
            <div class="stat-value">${genesis.totalMembers}</div>
            <div class="stat-label">Membres sélectionnés</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">${genesis.totalCapacity}%</div>
            <div class="stat-label">Capacité totale</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">${genesis.averageAvailability}%</div>
            <div class="stat-label">Disponibilité moyenne</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">${genesis.coveredTechnologies}/${genesis.totalCoreTechnologies}</div>
            <div class="stat-label">Technologies couvertes</div>
          </div>
        </div>
        
        <h2 style="margin-bottom: 20px; color: #4ade80;">Membres de l'équipe de genèse</h2>
        
        ${genesis.team.length > 0 ? genesis.team.map(member => `
          <div class="member-card">
            <div class="member-header">
              <div>
                <div class="member-name">${member.fullName || member.member}</div>
                <div style="font-size: 12px; color: #a0a0a0; margin-top: 4px;">
                  ${member.role || ''} • ${member.seniority} • ${member.coverage} technologie(s)
                </div>
              </div>
              <div class="member-availability">${member.availability}% dispo</div>
            </div>
            <div class="tech-list">
              ${member.technologies.map(tech => `
                <span class="tech-tag">${tech.title}</span>
              `).join('')}
            </div>
          </div>
        `).join('') : '<p style="color: #a0a0a0;">Aucun membre ne répond aux critères (disponibilité >= 50%).</p>'}
        
        ${genesis.uncoveredTechnologies.length > 0 ? `
          <div class="warning-box">
            <div class="warning-title">⚠️ Technologies Core non couvertes</div>
            <p style="margin-bottom: 10px;">Ces technologies critiques ne sont pas maîtrisées par l'équipe de genèse :</p>
            ${genesis.uncoveredTechnologies.map(tech => `
              <div class="uncovered-tech">
                <strong>${tech.title}</strong>
                <div style="font-size: 12px; color: #a0a0a0; margin-top: 4px;">
                  Impact: ${tech.businessImpact} • Gap: ${tech.skillGap} • Couverture actuelle: ${tech.teamCoverage} personne(s)
                </div>
              </div>
            `).join('')}
          </div>
        ` : ''}
      `;
      
      document.getElementById('genesis-team').innerHTML = html;
    }
    
    // Navigation par onglets
    function showTab(tabName) {
      // Désactiver tous les onglets
      document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
      });
      document.querySelectorAll('.tab-button').forEach(btn => {
        btn.classList.remove('active');
      });
      
      // Activer l'onglet sélectionné
      document.getElementById(`${tabName}-tab`).classList.add('active');
      event.target.classList.add('active');
      
      // Redimensionner les graphiques si nécessaire
      if (tabName === 'congestion' && congestionChart) {
        setTimeout(() => congestionChart.resize(), 100);
      }
      if (tabName === 'network' && networkCy) {
        setTimeout(() => networkCy.resize(), 100);
      }
    }
    
    // Charger au démarrage
    console.log('🚀 TEAM.HTML: Démarrage - appel loadData()');
    loadData();
  </script>
</body>
</html>

