# Utiliser une image Node.js légère
FROM node:20-alpine

# Build arguments pour invalider le cache si nécessaire
ARG BUILD_DATE=unknown
ARG BUILD_VERSION=unknown
ARG CACHE_BUST=1
LABEL build.date="${BUILD_DATE}" \
      build.version="${BUILD_VERSION}" \
      cache.bust="${CACHE_BUST}"

# Invalider le cache en utilisant CACHE_BUST dans une instruction RUN
# Cela force Docker à reconstruire à partir de cette ligne si CACHE_BUST change
# Utiliser CACHE_BUST dans une variable d'environnement pour forcer l'invalidation
RUN echo "Cache bust: ${CACHE_BUST}" && \
    echo "Build date: ${BUILD_DATE}" && \
    date && \
    echo "${CACHE_BUST}" > /tmp/cache_bust.txt

WORKDIR /app

# Variables d'environnement à définir AVANT npm install
ENV HUSKY=0
ENV HUSKY_SKIP_INSTALL=1
ENV NODE_PATH=/app/node_modules
ENV NODE_ENV=production

# Installation des dépendances système
RUN apk add --no-cache git python3

# Copie des fichiers de dépendances
COPY package.json package-lock.json* ./

# Installation des dépendances Node
RUN npm install --legacy-peer-deps --ignore-scripts cytoscape cytoscape-cose-bilkent echarts-for-react

# Patch du package aoe_technology_radar pour inclure gray-matter dans les dépendances runtime
RUN node -e "const fs=require('fs');const pkgPath='./node_modules/aoe_technology_radar/package.json';const pkg=JSON.parse(fs.readFileSync(pkgPath,'utf8'));pkg.dependencies=pkg.dependencies||{};pkg.dependencies['gray-matter']='^4.0.3';pkg.dependencies['postcss']='^8.4.47';pkg.scripts=pkg.scripts||{};pkg.scripts.prepare='';fs.writeFileSync(pkgPath,JSON.stringify(pkg,null,2));"

# Copie du reste du projet
COPY . .
RUN chmod +x scripts/start-business.sh

# Préparer .techradar une fois pour toutes (évite les réinstallations au runtime)
# Le script techradar.js crée automatiquement .techradar lors de l'exécution
# Création manuelle de .techradar en copiant depuis node_modules
RUN mkdir -p .techradar && \
    cp -r node_modules/aoe_technology_radar/* .techradar/
# Créer le fichier hash pour éviter la recréation (calculé séparément pour éviter les problèmes d'échappement)
RUN node -e "const crypto=require('crypto');const fs=require('fs');const hash=crypto.createHash('sha256').update(fs.readFileSync('package.json')).digest('hex');fs.writeFileSync('.techradar/hash',hash);"
RUN node -e "const fs=require('fs');const p='.techradar/package.json';if(!fs.existsSync(p)){console.error('.techradar/package.json not found');process.exit(1);}const pkg=JSON.parse(fs.readFileSync(p,'utf8'));pkg.scripts=pkg.scripts||{};pkg.scripts.prepare='';fs.writeFileSync(p,JSON.stringify(pkg,null,2));"
# Installer les dépendances dans .techradar (y compris devDependencies pour tsx nécessaire à build:data)
RUN cd .techradar && npm install --legacy-peer-deps --include=dev cytoscape cytoscape-cose-bilkent echarts-for-react
RUN cd .techradar && npm run build:icons

# --- CONFIGURATION BUSINESS ---
# Application de la logique Business (remplacement de la config et des données)
# Préserver la structure de dossiers par date pour que le framework puisse parser les dates
RUN cp radar-business/config-business.json config.json && \
    rm -rf radar/* && \
    mkdir -p radar/2025-01-15 && \
    cp -r radar-business/2025-01-15/* radar/2025-01-15/

# Générer les données de visualisation équipe si nécessaire
RUN if [ ! -f "public/team-visualization-data.json" ]; then \
      echo "⚠️ team-visualization-data.json non trouvé, génération..." && \
      node scripts/generate-team-visualization-data.js && \
      echo "✅ Données de visualisation équipe générées"; \
    else \
      echo "✅ team-visualization-data.json existe déjà"; \
    fi && \
    echo "🔍 Vérification contenu team-visualization-data.json:" && \
    ls -la public/team-visualization-data.json && \
    head -20 public/team-visualization-data.json

# Copier les fichiers nécessaires dans .techradar avant le build (comme le fait techradar.js)
RUN rm -rf .techradar/data/radar && \
    mkdir -p .techradar/data/radar/2025-01-15 && \
    cp -r radar-business/2025-01-15/* .techradar/data/radar/2025-01-15/ && \
    # Supprimer toute release de démo (2017-03-01, 2024-03-01, etc.) éventuellement recopiée depuis le package
    find .techradar/data/radar -mindepth 1 -maxdepth 1 ! -name '2025-01-15' -exec rm -rf {} + && \
    cp radar-business/config-business.json .techradar/data/config.json && \
    rm -rf .techradar/public && mkdir -p .techradar/public && \
    cp -r public/* .techradar/public/ && \
    cp public/team.html .techradar/public/team.html 2>/dev/null || true && \
    cp public/team-visualization-data.json .techradar/public/team-visualization-data.json 2>/dev/null || true && \
    cp about.md .techradar/data/about.md 2>/dev/null || echo "about.md not found, skipping" && \
    cp custom.css .techradar/src/styles/custom.css 2>/dev/null || echo "custom.css not found, skipping" && \
    echo "Fichiers public copiés" && \
    echo "📁 Vérification des fichiers team dans .techradar/public/:" && \
    ls -la .techradar/public/ | grep -E "(team\.html|team-visualization)" && echo "✅ Fichiers team trouvés" || (echo "⚠️ Fichiers team non trouvés dans .techradar/public/" && echo "📁 Contenu de public/ source:" && ls -la public/ | head -10) && \
    echo "📁 Vérification que team.html existe dans public/ source:" && \
    test -f public/team.html && echo "✅ public/team.html existe" || echo "❌ public/team.html n'existe pas"

# Diagnostic : compter les fichiers markdown copiés dans .techradar/data/radar
RUN echo "📊 Comptage des fichiers .md dans .techradar/data/radar" && \
    find .techradar/data/radar -name "*.md" | wc -l && \
    find .techradar/data/radar -name "*.md" | head -10

# Créer la page Next.js /team ET un fichier HTML statique /team/index.html
# La page Next.js pour le routing, le HTML statique pour garantir l'affichage
RUN mkdir -p .techradar/src/pages && \
    cat > .techradar/src/pages/team.tsx << 'EOF'
import { useEffect, useState, useRef } from 'react';
import dynamic from 'next/dynamic';

// Chargement dynamique des bibliothèques pour éviter les erreurs SSR
const CytoscapeComponent = dynamic(() => import('cytoscape'), { ssr: false });
const EChartsComponent = dynamic(() => import('echarts-for-react'), { ssr: false });

export default function TeamPage() {
  const [activeTab, setActiveTab] = useState('network');
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const networkRef = useRef(null);
  const matrixRef = useRef(null);

  useEffect(() => {
    // Charger les données équipe
    loadTeamData();
  }, []);

  useEffect(() => {
    // Initialiser les graphiques quand les données sont chargées et l'onglet actif change
    if (data && !loading) {
      if (activeTab === 'network') {
        initNetworkGraph();
      } else if (activeTab === 'congestion') {
        initCongestionMatrix();
      }
    }
  }, [data, loading, activeTab]);

  const loadTeamData = async () => {
    try {
      console.log('🔄 Chargement des données équipe...');
      const response = await fetch('/team-visualization-data.json');
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }
      const jsonData = await response.json();
      console.log('✅ Données chargées:', Object.keys(jsonData));
      setData(jsonData);
    } catch (err) {
      console.error('❌ Erreur chargement données:', err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const initNetworkGraph = () => {
    if (!data?.network || !networkRef.current) return;

    console.log('📊 Initialisation graphe réseau...');

    // Import dynamique pour éviter les erreurs SSR
    import('cytoscape').then((cytoscape) => {
      import('cytoscape-cose-bilkent').then(() => {
        const cy = cytoscape.default({
          container: networkRef.current,
          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));
                },
                'font-size': '12px',
                'text-valign': 'center',
                'text-halign': 'center',
                'color': '#ffffff',
                'text-outline-color': '#1a4d3a',
                'text-outline-width': '2px'
              }
            },
            {
              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));
                },
                'font-size': '10px',
                'text-valign': 'center',
                'text-halign': 'center',
                'color': '#1a4d3a',
                'text-outline-color': '#ffffff',
                'text-outline-width': '1px'
              }
            },
            {
              selector: 'edge',
              style: {
                'width': function(ele) {
                  return 1 + (ele.data('weight') || 0.5);
                },
                'line-color': '#4ade80',
                'target-arrow-color': '#4ade80',
                'target-arrow-shape': 'triangle',
                'curve-style': 'bezier'
              }
            }
          ],
          layout: {
            name: 'cose-bilkent',
            animate: true,
            animationDuration: 1000,
            nodeRepulsion: 4500,
            idealEdgeLength: 100,
            edgeElasticity: 0.45
          }
        });

        // Gestionnaire de clics
        cy.on('tap', 'node', function(evt) {
          const node = evt.target;
          const nodeData = node.data();
          let tooltip = '';

          if (nodeData.type === 'technology') {
            tooltip = \`\${nodeData.label}\\n\` +
                     \`Ring: \${nodeData.ring}\\n\` +
                     \`Couverture: \${nodeData.coverage} personne(s)\\n\` +
                     \`Impact: \${nodeData.businessImpact}\\n\` +
                     \`Gap: \${nodeData.skillGap}\`;
          } else {
            tooltip = \`\${nodeData.label}\\n\` +
                     \`Disponibilité: \${nodeData.availability}%\` +
                     (nodeData.role ? \`\\nRôle: \${nodeData.role}\` : '');
          }

          alert(tooltip);
        });

        console.log('✅ Graphe réseau initialisé');
      });
    });
  };

  const initCongestionMatrix = () => {
    if (!data?.congestionMatrix || !matrixRef.current) return;

    console.log('📈 Initialisation matrice congestion...');

    // Import dynamique pour éviter les erreurs SSR
    import('echarts-for-react').then(() => {
      import('echarts').then((echarts) => {
        const techs = data.congestionMatrix.map(r => r.technology);
        const members = data.congestionMatrix[0]?.members.map(m => m.fullName || m.member) || [];

        const scatterData = [];
        data.congestionMatrix.forEach((row, i) => {
          row.members.forEach((member, j) => {
            scatterData.push([j, i, member.availability, member]);
          });
        });

        const chart = echarts.default.init(matrixRef.current);
        const option = {
          title: {
            text: 'Disponibilité des Technologies Core',
            left: 'center',
            textStyle: { color: '#e0e0e0' }
          },
          tooltip: {
            formatter: function(params) {
              if (params.data && params.data[3]) {
                const member = params.data[3];
                return \`\${member.fullName || member.member}<br/>\` +
                       \`Technologie: \${techs[params.data[1]]}<br/>\` +
                       \`Disponibilité: \${params.data[2]}%\`;
              }
            }
          },
          grid: {
            left: '10%',
            right: '10%',
            top: '15%',
            bottom: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: members,
            axisLabel: {
              color: '#e0e0e0',
              rotate: 45
            }
          },
          yAxis: {
            type: 'category',
            data: techs,
            axisLabel: { color: '#e0e0e0' }
          },
          visualMap: {
            min: 0,
            max: 100,
            dimension: 2,
            orient: 'horizontal',
            left: 'center',
            top: 'top',
            text: ['Élevé', 'Faible'],
            textStyle: { color: '#e0e0e0' },
            inRange: {
              color: ['#ff4444', '#ff8800', '#4488ff', '#88ff88']
            },
            outOfRange: {
              color: '#444444'
            }
          },
          series: [{
            name: 'Disponibilité',
            type: 'scatter',
            data: scatterData,
            symbolSize: function(data) {
              return 15 + (data[2] || 0) / 2;
            }
          }]
        };

        chart.setOption(option);
        console.log('✅ Matrice congestion initialisée');
      });
    });
  };

  const renderGenesisTeam = () => {
    if (!data?.genesisTeam) return <div>Données équipe non disponibles</div>;

    const genesis = data.genesisTeam;
    return (
      <div>
        <h2 style={{marginBottom: '20px'}}>Équipe de Genèse MVP</h2>
        <div style={{background: 'rgba(74, 222, 128, 0.1)', padding: '20px', borderRadius: '8px', marginBottom: '20px'}}>
          <h3 style={{color: '#4ade80', marginBottom: '10px'}}>Critères de Sélection</h3>
          <ul style={{marginLeft: '20px'}}>
            <li>Disponibilité ≥ {genesis.minAvailability}%</li>
            <li>Couverture technologique ≥ {genesis.minCoverage} technologies</li>
            <li>Taille équipe optimale: {genesis.targetTeamSize} membres</li>
          </ul>
        </div>

        <div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '20px', marginTop: '20px'}}>
          {genesis.selectedMembers.map(member => (
            <div key={member.member} style={{background: 'rgba(26, 77, 58, 0.5)', borderRadius: '8px', padding: '20px', border: '1px solid rgba(74, 222, 128, 0.3)'}}>
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px'}}>
                <div>
                  <div style={{fontSize: '18px', fontWeight: 'bold', color: '#4ade80'}}>{member.fullName || member.member}</div>
                  <div style={{fontSize: '12px', color: '#a0a0a0', marginTop: '4px'}}>
                    {member.role || ''} • {member.seniority} • {member.coverage} technologie(s)
                  </div>
                </div>
                <div style={{textAlign: 'right'}}>
                  <div style={{fontSize: '24px', color: '#4ade80', fontWeight: 'bold'}}>{member.availability}%</div>
                  <div style={{fontSize: '12px', color: '#a0a0a0'}}>Disponibilité</div>
                </div>
              </div>
              <div style={{display: 'flex', flexWrap: 'wrap', gap: '8px', marginTop: '10px'}}>
                {member.skills.slice(0, 8).map(skill => (
                  <span key={skill} style={{background: 'rgba(74, 222, 128, 0.2)', color: '#4ade80', padding: '4px 8px', borderRadius: '4px', fontSize: '12px'}}>
                    {skill}
                  </span>
                ))}
                {member.skills.length > 8 && (
                  <span style={{background: 'rgba(74, 222, 128, 0.2)', color: '#4ade80', padding: '4px 8px', borderRadius: '4px', fontSize: '12px'}}>
                    +{member.skills.length - 8}
                  </span>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  if (loading) {
    return (
      <div style={{
        width: '100vw',
        height: '100vh',
        background: '#1a4d3a',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'fixed',
        top: 0,
        left: 0,
        zIndex: 9999
      }}>
        <div style={{color: 'white', fontSize: '18px'}}>
          Chargement des visualisations équipe...
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div style={{
        width: '100vw',
        height: '100vh',
        background: '#1a4d3a',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'fixed',
        top: 0,
        left: 0,
        zIndex: 9999
      }}>
        <div style={{color: 'white', fontSize: '18px'}}>
          Erreur: {error}
        </div>
      </div>
    );
  }

  return (
    <div style={{
      width: '100vw',
      minHeight: '100vh',
      background: '#1a4d3a',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',
      color: '#e0e0e0',
      padding: '20px'
    }}>
      <div style={{maxWidth: '1400px', margin: '0 auto'}}>
        <header style={{
          textAlign: 'center',
          marginBottom: '30px',
          padding: '20px',
          background: 'rgba(26, 77, 58, 0.5)',
          borderRadius: '8px'
        }}>
          <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px'}}>
            <a href="/" style={{color: '#4ade80', textDecoration: 'none', fontSize: '18px', fontWeight: 'bold'}}>← Retour au Radar</a>
            <div></div>
          </div>
          <h1 style={{color: '#4ade80', marginBottom: '10px'}}>👥 Équipe & Technologies</h1>
          <p>Visualisation des compétences et identification de l'équipe de genèse MVP</p>
        </header>

        <div style={{display: 'flex', gap: '10px', marginBottom: '20px', flexWrap: 'wrap'}}>
          <button
            onClick={() => setActiveTab('network')}
            style={{
              padding: '12px 24px',
              background: activeTab === 'network' ? '#4ade80' : 'rgba(74, 222, 128, 0.2)',
              border: '1px solid #4ade80',
              borderRadius: '6px',
              color: activeTab === 'network' ? '#1a4d3a' : '#4ade80',
              cursor: 'pointer',
              fontSize: '14px',
              transition: 'all 0.3s ease',
              fontWeight: activeTab === 'network' ? 'bold' : 'normal'
            }}
          >
            Graphe Réseau
          </button>
          <button
            onClick={() => setActiveTab('congestion')}
            style={{
              padding: '12px 24px',
              background: activeTab === 'congestion' ? '#4ade80' : 'rgba(74, 222, 128, 0.2)',
              border: '1px solid #4ade80',
              borderRadius: '6px',
              color: activeTab === 'congestion' ? '#1a4d3a' : '#4ade80',
              cursor: 'pointer',
              fontSize: '14px',
              transition: 'all 0.3s ease',
              fontWeight: activeTab === 'congestion' ? 'bold' : 'normal'
            }}
          >
            Matrice Congestion
          </button>
          <button
            onClick={() => setActiveTab('genesis')}
            style={{
              padding: '12px 24px',
              background: activeTab === 'genesis' ? '#4ade80' : 'rgba(74, 222, 128, 0.2)',
              border: '1px solid #4ade80',
              borderRadius: '6px',
              color: activeTab === 'genesis' ? '#1a4d3a' : '#4ade80',
              cursor: 'pointer',
              fontSize: '14px',
              transition: 'all 0.3s ease',
              fontWeight: activeTab === 'genesis' ? 'bold' : 'normal'
            }}
          >
            Équipe Genèse MVP
          </button>
        </div>

        {activeTab === 'network' && (
          <div style={{
            background: 'rgba(26, 77, 58, 0.3)',
            padding: '20px',
            borderRadius: '8px',
            marginBottom: '20px'
          }}>
            <h2 style={{marginBottom: '20px'}}>Graphe Réseau - Technologies et Compétences</h2>
            <div style={{
              display: 'flex',
              flexWrap: 'wrap',
              gap: '15px',
              marginBottom: '20px',
              padding: '15px',
              background: 'rgba(0, 0, 0, 0.2)',
              borderRadius: '6px'
            }}>
              <div style={{display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px'}}>
                <div style={{width: '16px', height: '16px', borderRadius: '50%', background: '#ff4444'}}></div>
                <span>Technologies Core</span>
              </div>
              <div style={{display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px'}}>
                <div style={{width: '16px', height: '16px', borderRadius: '50%', background: '#ff8800'}}></div>
                <span>Technologies Avancées</span>
              </div>
              <div style={{display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px'}}>
                <div style={{width: '16px', height: '16px', borderRadius: '50%', background: '#4488ff'}}></div>
                <span>Technologies Utilitaires</span>
              </div>
              <div style={{display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px'}}>
                <div style={{width: '16px', height: '16px', borderRadius: '50%', background: '#88ff88'}}></div>
                <span>Membres Équipe</span>
              </div>
            </div>
            <div ref={networkRef} style={{width: '100%', height: '600px', border: '1px solid rgba(74, 222, 128, 0.3)', borderRadius: '8px'}}></div>
          </div>
        )}

        {activeTab === 'congestion' && (
          <div style={{
            background: 'rgba(26, 77, 58, 0.3)',
            padding: '20px',
            borderRadius: '8px',
            marginBottom: '20px'
          }}>
            <h2 style={{marginBottom: '20px'}}>Matrice de Congestion - Technologies Core</h2>
            <div ref={matrixRef} style={{width: '100%', height: '600px', border: '1px solid rgba(74, 222, 128, 0.3)', borderRadius: '8px'}}></div>
          </div>
        )}

        {activeTab === 'genesis' && (
          <div style={{
            background: 'rgba(26, 77, 58, 0.3)',
            padding: '20px',
            borderRadius: '8px',
            marginBottom: '20px'
          }}>
            {renderGenesisTeam()}
          </div>
        )}
      </div>
    </div>
  );
}
EOF
<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>
  <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: 1px solid #4ade80;
      border-radius: 6px;
      color: #4ade80;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .tab-button:hover {
      background: rgba(74, 222, 128, 0.3);
    }

    .tab-button.active {
      background: #4ade80;
      color: #1a4d3a;
      font-weight: bold;
    }

    .tab-content {
      display: none;
      background: rgba(26, 77, 58, 0.3);
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    .tab-content.active {
      display: block;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 20px;
      padding: 15px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    .legend-color {
      width: 16px;
      height: 16px;
      border-radius: 50%;
    }

    .warning-box {
      background: rgba(255, 152, 0, 0.1);
      border: 1px solid #ff9800;
      border-radius: 6px;
      padding: 15px;
      margin: 20px 0;
      color: #ff9800;
    }

    .member-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    .member-card {
      background: rgba(26, 77, 58, 0.5);
      border-radius: 8px;
      padding: 20px;
      border: 1px solid rgba(74, 222, 128, 0.3);
    }

    .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-role {
      font-size: 14px;
      color: #a0a0a0;
    }

    .skills-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .skill-tag {
      background: rgba(74, 222, 128, 0.2);
      color: #4ade80;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
    }

    .back-link {
      display: inline-block;
      margin-bottom: 20px;
      color: #4ade80;
      text-decoration: none;
      font-weight: bold;
    }

    .back-link:hover {
      text-decoration: underline;
    }
  </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">
      <h2 style="margin-bottom: 20px;">Graphe Réseau - Technologies et Compétences</h2>
      <div class="legend">
        <div class="legend-item">
          <div class="legend-color" style="background: #ff4444;"></div>
          <span>Technologies Core</span>
        </div>
        <div class="legend-item">
          <div class="legend-color" style="background: #ff8800;"></div>
          <span>Technologies Avancées</span>
        </div>
        <div class="legend-item">
          <div class="legend-color" style="background: #4488ff;"></div>
          <span>Technologies Utilitaires</span>
        </div>
        <div class="legend-item">
          <div class="legend-color" style="background: #88ff88;"></div>
          <span>Membres Équipe</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 PAGE: Script intégré chargé, initialisation...');

    let data = null;
    let networkCy = null;
    let congestionChart = null;

    console.log('🔧 TEAM PAGE: Scripts externes chargés');
    console.log('🔧 Cytoscape disponible:', typeof cytoscape !== 'undefined');
    console.log('🔧 ECharts disponible:', typeof echarts !== 'undefined');

    // Charger les données
    async function loadData() {
      console.log('📋 TEAM PAGE: Fonction loadData() appelée');

      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 informatif
        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 \`team-visualization-data.json\` est accessible</li>
              <li>Le script \`generate-team-visualization-data.js\` doit avoir été exécuté</li>
            </ul>
            <p><strong>Erreur détectée :</strong> \${error.message}</p>
          </div>
        \`;

        // Afficher le message 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 PAGE: initVisualizations() appelée');
      initNetworkGraph();
      initCongestionMatrix();
      initGenesisTeam();
    }

    function initNetworkGraph() {
      console.log('📊 TEAM PAGE: initNetworkGraph() appelée');
      if (!data || !data.network) {
        console.log('⚠️ TEAM PAGE: Pas de données réseau');
        return;
      }

      const container = document.getElementById('network-graph');
      if (!container) return;

      networkCy = cytoscape({
        container: container,
        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));
              },
              'font-size': '12px',
              'text-valign': 'center',
              'text-halign': 'center',
              'color': '#ffffff',
              'text-outline-color': '#1a4d3a',
              'text-outline-width': '2px'
            }
          },
          {
            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));
              },
              'font-size': '10px',
              'text-valign': 'center',
              'text-halign': 'center',
              'color': '#1a4d3a',
              'text-outline-color': '#ffffff',
              'text-outline-width': '1px'
            }
          },
          {
            selector: 'edge',
            style: {
              'width': function(ele) {
                return 1 + (ele.data('weight') || 0.5);
              },
              'line-color': '#4ade80',
              'target-arrow-color': '#4ade80',
              'target-arrow-shape': 'triangle',
              'curve-style': 'bezier'
            }
          }
        ],
        layout: {
          name: 'cose-bilkent',
          animate: true,
          animationDuration: 1000,
          nodeRepulsion: 4500,
          idealEdgeLength: 100,
          edgeElasticity: 0.45
        }
      });

      // Gestionnaire de clics sur les nœuds
      networkCy.on('tap', 'node', function(evt) {
        const node = evt.target;
        const nodeData = node.data();
        let tooltip = '';

        if (nodeData.type === 'technology') {
          tooltip = \`\${nodeData.label}\\n\` +
                    \`Ring: \${nodeData.ring}\\n\` +
                    \`Couverture: \${nodeData.coverage} personne(s)\\n\` +
                    \`Impact: \${nodeData.businessImpact}\\n\` +
                    \`Gap: \${nodeData.skillGap}\`;
        } else {
          tooltip = \`\${nodeData.label}\\n\` +
                    \`Disponibilité: \${nodeData.availability}%\` +
                    (nodeData.role ? \`\\nRôle: \${nodeData.role}\` : '');
        }

        // Afficher un tooltip simple
        alert(tooltip);
      });

      console.log('✅ TEAM PAGE: Graphe réseau initialisé');
    }

    function initCongestionMatrix() {
      console.log('📈 TEAM PAGE: initCongestionMatrix() appelée');
      if (!data || !data.congestionMatrix) {
        console.log('⚠️ TEAM PAGE: Pas de données matrice congestion');
        return;
      }

      const container = document.getElementById('congestion-matrix');
      if (!container) return;

      const techs = data.congestionMatrix.map(r => r.technology);
      const members = data.congestionMatrix[0]?.members.map(m => m.fullName || m.member) || [];

      const scatterData = [];
      data.congestionMatrix.forEach((row, i) => {
        row.members.forEach((member, j) => {
          scatterData.push([j, i, member.availability, member]);
        });
      });

      congestionChart = echarts.init(container);
      const option = {
        title: {
          text: 'Disponibilité des Technologies Core',
          left: 'center',
          textStyle: { color: '#e0e0e0' }
        },
        tooltip: {
          formatter: function(params) {
            if (params.data && params.data[3]) {
              const member = params.data[3];
              return \`\${member.fullName || member.member}<br/>\` +
                     \`Technologie: \${techs[params.data[1]]}<br/>\` +
                     \`Disponibilité: \${params.data[2]}%\`;
            }
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          top: '15%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: members,
          axisLabel: {
            color: '#e0e0e0',
            rotate: 45
          }
        },
        yAxis: {
          type: 'category',
          data: techs,
          axisLabel: { color: '#e0e0e0' }
        },
        visualMap: {
          min: 0,
          max: 100,
          dimension: 2,
          orient: 'horizontal',
          left: 'center',
          top: 'top',
          text: ['Élevé', 'Faible'],
          textStyle: { color: '#e0e0e0' },
          inRange: {
            color: ['#ff4444', '#ff8800', '#4488ff', '#88ff88']
          },
          outOfRange: {
            color: '#444444'
          }
        },
        series: [{
          name: 'Disponibilité',
          type: 'scatter',
          data: scatterData,
          symbolSize: function(data) {
            return 15 + (data[2] || 0) / 2;
          }
        }]
      };

      congestionChart.setOption(option);

      // Redimensionner au resize
      window.addEventListener('resize', () => congestionChart.resize());

      console.log('✅ TEAM PAGE: Matrice congestion initialisée');
    }

    function initGenesisTeam() {
      console.log('👥 TEAM PAGE: initGenesisTeam() appelée');
      if (!data || !data.genesisTeam) {
        console.log('⚠️ TEAM PAGE: Pas de données équipe genèse');
        return;
      }

      const genesis = data.genesisTeam;
      const html = \`
        <h2 style="margin-bottom: 20px;">Équipe de Genèse MVP</h2>
        <div style="background: rgba(74, 222, 128, 0.1); padding: 20px; border-radius: 8px; margin-bottom: 20px;">
          <h3 style="color: #4ade80; margin-bottom: 10px;">Critères de Sélection</h3>
          <ul style="margin-left: 20px;">
            <li>Disponibilité ≥ \${genesis.minAvailability}%</li>
            <li>Couverture technologique ≥ \${genesis.minCoverage} technologies</li>
            <li>Taille équipe optimale: \${genesis.targetTeamSize} membres</li>
          </ul>
        </div>

        <div class="member-grid">
          \${genesis.selectedMembers.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 style="text-align: right;">
                  <div style="font-size: 24px; color: #4ade80; font-weight: bold;">\${member.availability}%</div>
                  <div style="font-size: 12px; color: #a0a0a0;">Disponibilité</div>
                </div>
              </div>
              <div class="skills-list">
                \${member.skills.slice(0, 8).map(skill => \`<span class="skill-tag">\${skill}</span>\`).join('')}
                \${member.skills.length > 8 ? \`<span class="skill-tag">+\${member.skills.length - 8}</span>\` : ''}
              </div>
            </div>
          \`).join('')}
        </div>
      \`;

      document.getElementById('genesis-team').innerHTML = html;
      console.log('✅ TEAM PAGE: Équipe genèse affichée');
    }

    // Gestionnaire d'onglets
    function showTab(tabId) {
      // Masquer tous les onglets
      document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
      });

      // Désactiver tous les boutons
      document.querySelectorAll('.tab-button').forEach(btn => {
        btn.classList.remove('active');
      });

      // Afficher l'onglet sélectionné
      document.getElementById(tabId + '-tab').classList.add('active');

      // Activer le bouton
      event.target.classList.add('active');
    }

    // Charger au démarrage
    console.log('🚀 TEAM PAGE: Démarrage - appel loadData()');
    loadData();

    console.log('✅ TEAM PAGE: Initialisation terminée');
  </script>
</body>
</html>`;

    setHtmlContent(staticHtml);
  }, []);

  // Rendre le HTML chargé
  if (htmlContent) {
    return (
      <div
        style={{width: '100vw', height: '100vh'}}
        dangerouslySetInnerHTML={{__html: htmlContent}}
      />
    );
  }

  // Pendant le chargement
  return (
    <div style={{
      width: '100vw',
      height: '100vh',
      background: '#1a4d3a',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      position: 'fixed',
      top: 0,
      left: 0,
      zIndex: 9999
    }}>
      <div style={{color: 'white', fontSize: '18px'}}>
        Chargement des visualisations équipe...
      </div>
    </div>
  );
}
EOF
RUN echo "✅ Page team.tsx créée (version ultra-simplifiée)" && \
    echo "🔍 VÉRIFICATION: Contenu de team.tsx créé:" && \
    cat .techradar/src/pages/team.tsx && \
    echo "🔍 VÉRIFICATION: team.html dans .techradar/public/:" && \
    ls -la .techradar/public/team.html

# Créer aussi un fichier HTML statique /team/index.html pour garantir l'accès
RUN mkdir -p .techradar/public/team && \
    cat > .techradar/public/team/index.html << 'EOF'
<!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>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }
  </style>
</head>
<body>
  <iframe src="/team.html" title="Équipe & Technologies"></iframe>
</body>
</html>
EOF
RUN echo "✅ Fichier /team/index.html créé (HTML statique)"

# Script Python pour ajouter le lien Équipe dans Navigation.tsx (supprime TOUS les doublons)
RUN cat > /tmp/add_team_link.py << 'PYEOF'
#!/usr/bin/env python3
import sys
import re
import os

f = ".techradar/src/components/Navigation/Navigation.tsx"

try:
    # Vérifier que le fichier existe
    if not os.path.exists(f):
        print(f"❌ Fichier {f} introuvable", file=sys.stderr)
        sys.exit(1)

    with open(f, 'r', encoding='utf-8') as file:
        content = file.read()

    # VÉRIFICATION PRÉLIMINAIRE: Détecter les doublons structurels
    print("🔍 Vérification de la structure du composant...")
    
    # Compter les éléments structurels
    nav_patterns = [
        r'<nav\s',
        r'className.*[Nn]avigation',
        r'export\s+(default\s+)?function\s+Navigation',
        r'const\s+Navigation\s*='
    ]
    nav_count = sum(len(re.findall(pattern, content)) for pattern in nav_patterns)
    
    # Compter les <ul> (peut y en avoir 2 pour mobile/desktop)
    ul_count = len(re.findall(r'<ul[^>]*>', content))
    
    # Compter les logos (Image avec logo ou logoFile)
    logo_patterns = [
        r'logoFile',
        r'logo\.svg',
        r'[Ll]ogo',
        r'Image.*logo'
    ]
    logo_count = sum(len(re.findall(pattern, content)) for pattern in logo_patterns)
    
    # Compter les fonctions Navigation
    function_count = len(re.findall(r'(export\s+(default\s+)?function\s+Navigation|const\s+Navigation\s*=\s*\(|function\s+Navigation\s*\()', content))
    
    print(f"📊 Structure détectée: {nav_count} nav, {ul_count} ul, {logo_count} logo, {function_count} fonction(s)")
    
    # Détecter les duplications structurelles
    if function_count > 1:
        print(f"⚠️ ATTENTION: {function_count} fonction(s) Navigation détectée(s) - possible duplication du composant", file=sys.stderr)
        # Extraire uniquement la première fonction Navigation
        matches = list(re.finditer(r'(export\s+(default\s+)?function\s+Navigation|const\s+Navigation\s*=\s*\(|function\s+Navigation\s*\()', content))
        if len(matches) > 1:
            # Garder seulement jusqu'à la fin de la première fonction
            first_end = matches[1].start() if len(matches) > 1 else len(content)
            content = content[:first_end]
            # Trouver la fin de la fonction (dernière accolade fermante avant la prochaine fonction)
            brace_count = 0
            in_function = False
            for i, char in enumerate(content[matches[0].start():], matches[0].start()):
                if char == '{':
                    brace_count += 1
                    in_function = True
                elif char == '}':
                    brace_count -= 1
                    if in_function and brace_count == 0:
                        content = content[:i+1]
                        break
            print(f"✅ Duplication du composant supprimée")
    
    if ul_count > 3:  # Plus de 3 ul suggère une duplication
        print(f"⚠️ ATTENTION: {ul_count} éléments <ul> détectés - possible duplication", file=sys.stderr)
    
    if logo_count > 5:  # Plus de 5 références au logo suggère une duplication
        print(f"⚠️ ATTENTION: {logo_count} références au logo détectées - possible duplication", file=sys.stderr)

    # ÉTAPE 1: Supprimer TOUS les liens Équipe existants (même s'il n'y en a qu'un)
    print("🧹 Nettoyage de tous les liens Équipe existants...")
    
    # APPROCHE AGRESSIVE: Supprimer tous les blocs <li> contenant un lien vers /team
    # Utiliser plusieurs patterns pour capturer tous les cas possibles
    # Pattern 1: <li>...<Link href="/team"...>...</Link>...</li>
    team_link_block_pattern = r'<li[^>]*>.*?<Link[^>]*href=["\']/?team(/|\.html)?["\'][^>]*>.*?</Link>.*?</li>'
    content_cleaned = re.sub(team_link_block_pattern, '', content, flags=re.DOTALL | re.IGNORECASE)
    
    # Pattern 2: Supprimer aussi les lignes contenant href="/team" même si elles ne sont pas dans un <li> complet
    content_cleaned = re.sub(r'.*href=["\']/?team(/|\.html)?["\'].*\n', '', content_cleaned, flags=re.IGNORECASE)
    
    # Pattern 3: Supprimer les blocs <li> qui pourraient contenir /team sur plusieurs lignes (format différent)
    content_cleaned = re.sub(r'<li[^>]*>.*?/team.*?</li>', '', content_cleaned, flags=re.DOTALL | re.IGNORECASE)
    
    # Compter combien de liens ont été supprimés
    remaining_before = len(re.findall(r'href=["\']/?team(/|\.html)?["\']', content))
    remaining_after = len(re.findall(r'href=["\']/?team(/|\.html)?["\']', content_cleaned))
    team_links_removed = remaining_before - remaining_after
    
    if team_links_removed > 0:
        print(f"✅ {team_links_removed} lien(s) Équipe supprimé(s) (regex multiligne)")
    elif remaining_after > 0:
        print(f"⚠️ {remaining_after} lien(s) Équipe encore présent(s) après nettoyage regex, nettoyage manuel...")
        # Nettoyage manuel ligne par ligne si la regex n'a pas tout capturé
        lines = content_cleaned.splitlines(keepends=True)
        if lines and not lines[-1].endswith('\n'):
            lines[-1] = lines[-1] + '\n'
        
        new_lines = []
        skip_team_link = False
        manual_removed = 0
        
        i = 0
        while i < len(lines):
            line = lines[i]
            
            # Détecter le début d'un lien Équipe
            team_link_match = re.search(r'href=["\']/?team(/|\.html)?["\']|href=\{["\']/?team', line)
            if team_link_match and not skip_team_link:
                skip_team_link = True
                manual_removed += 1
                i += 1
                continue
            
            if skip_team_link:
                if '</li>' in line:
                    skip_team_link = False
                i += 1
                continue
            
            new_lines.append(line)
            i += 1
        
        if manual_removed > 0:
            content_cleaned = ''.join(new_lines)
            print(f"✅ {manual_removed} lien(s) Équipe supplémentaire(s) supprimé(s) (nettoyage manuel)")
    
    lines = content_cleaned.splitlines(keepends=True)
    if lines and not lines[-1].endswith('\n'):
        lines[-1] = lines[-1] + '\n'
    
    # ÉTAPE 2: Vérifier qu'il n'y a plus aucun lien team avant d'ajouter
    final_check = len(re.findall(r'href=["\']/?team(/|\.html)?["\']', content_cleaned))
    if final_check > 0:
        print(f"⚠️ ATTENTION: {final_check} lien(s) Équipe encore présent(s) après nettoyage, nettoyage supplémentaire...", file=sys.stderr)
        # Nettoyage supplémentaire avec une regex plus agressive
        content_cleaned = re.sub(r'.*?href=["\']/?team(/|\.html)?["\'].*?\n', '', content_cleaned, flags=re.MULTILINE | re.IGNORECASE)
        # Supprimer aussi les blocs <li> vides qui pourraient rester
        content_cleaned = re.sub(r'<li[^>]*>\s*</li>\s*\n', '', content_cleaned)
        final_check_2 = len(re.findall(r'href=["\']/?team(/|\.html)?["\']', content_cleaned))
        if final_check_2 > 0:
            print(f"❌ ERREUR: {final_check_2} lien(s) Équipe toujours présent(s) après nettoyage supplémentaire!", file=sys.stderr)
            print("📄 Contenu autour des liens restants:", file=sys.stderr)
            for match in re.finditer(r'href=["\']/?team(/|\.html)?["\']', content_cleaned):
                start = max(0, match.start() - 50)
                end = min(len(content_cleaned), match.end() + 50)
                print(f"  {content_cleaned[start:end]}", file=sys.stderr)
        else:
            print(f"✅ Tous les liens Équipe supprimés après nettoyage supplémentaire")
    
    # ÉTAPE 3: Ajouter un seul lien Équipe au bon endroit
    insert_idx = -1
    for i, line in enumerate(lines):
        if 'href="/overview"' in line:
            for j in range(i, min(i+10, len(lines))):
                if '</Link>' in lines[j] and j+1 < len(lines) and '</li>' in lines[j+1]:
                    insert_idx = j + 2
                    break
            break

    if insert_idx > 0:
        new_lines = lines[:insert_idx] + [
            '        <li className={styles.item}>\n',
            '          <Link href="/team">\n',
            '            <span className={styles.label}>👥 Équipe</span>\n',
            '          </Link>\n',
            '        </li>\n'
        ] + lines[insert_idx:]
        with open(f, 'w', encoding='utf-8') as file:
            file.writelines(new_lines)
        
        # Vérifier qu'il n'y a qu'un seul lien maintenant (inclut /team, /team/, /team.html)
        with open(f, 'r', encoding='utf-8') as file:
            final_content = file.read()
        final_count = len(re.findall(r'href=["\']/?team(/|\.html)?["\']', final_content))
        
        if final_count == 1:
            print("✅ Navigation.tsx modifié - 1 seul lien Équipe présent")
            sys.exit(0)
        else:
            print(f"⚠️ Attention: {final_count} lien(s) Équipe détecté(s) après modification", file=sys.stderr)
            sys.exit(1)
    else:
        print("❌ Impossible de trouver l'emplacement pour insérer le lien", file=sys.stderr)
        sys.exit(1)
except Exception as e:
    print(f"❌ Erreur Python: {e}", file=sys.stderr)
    import traceback
    traceback.print_exc(file=sys.stderr)
    sys.exit(1)
PYEOF

# Script shell pour gérer l'ajout du lien Équipe
RUN cat > /tmp/add_team_link.sh << 'SHEOF'
#!/bin/sh
set -e

echo "🔧 Modification de Navigation.tsx pour le lien Équipe..."

NAV_FILE=".techradar/src/components/Navigation/Navigation.tsx"

# Vérifier que le fichier existe
if [ ! -f "$NAV_FILE" ]; then
  echo "❌ Fichier $NAV_FILE introuvable"
  echo "📁 Répertoire actuel: $(pwd)"
  echo "📁 Contenu de .techradar/src/components/:"
  ls -la .techradar/src/components/ 2>/dev/null || echo "Répertoire non trouvé"
  exit 1
fi

# Exécuter le script Python
if python3 /tmp/add_team_link.py; then
  # Vérifier le résultat (inclut /team, /team/, /team.html)
  team_count=$(grep -cE 'href="/team|href=\{"/team|href=["'"'"']/team' "$NAV_FILE" 2>/dev/null || echo "0")
  echo "📊 Nombre d'occurrences trouvées: $team_count"
  
  if [ "$team_count" -eq "1" ]; then
    echo "✅ Lien Équipe présent (1 occurrence)"
  elif [ "$team_count" -gt "1" ]; then
    echo "❌ ERREUR: $team_count occurrences détectées - affichage des occurrences:"
    grep -nE 'href="/team|href=\{"/team|href=["'"'"']/team' "$NAV_FILE" || true
    echo "⚠️ Relance du nettoyage..."
    python3 /tmp/add_team_link.py
    final_count=$(grep -cE 'href="/team|href=\{"/team|href=["'"'"']/team' "$NAV_FILE" 2>/dev/null || echo "0")
    if [ "$final_count" -gt "1" ]; then
      echo "❌ ERREUR CRITIQUE: $final_count occurrences encore présentes après nettoyage!"
      echo "📄 Aperçu complet de Navigation.tsx:"
      cat "$NAV_FILE" || true
      exit 1
    else
      echo "✅ Après nettoyage: $final_count occurrence(s)"
    fi
  else
    echo "❌ Lien Équipe non trouvé après modification"
    echo "📄 Aperçu de Navigation.tsx (premières 50 lignes):"
    head -50 "$NAV_FILE" || true
    exit 1
  fi
  
  # VÉRIFICATIONS POST-MODIFICATION: Détecter les doublons structurels
  echo "🔍 Vérification des doublons structurels..."
  
  # Compter les fonctions Navigation
  function_count=$(grep -cE '(export\s+(default\s+)?function\s+Navigation|const\s+Navigation\s*=\s*\(|function\s+Navigation\s*\()' "$NAV_FILE" 2>/dev/null || echo "0")
  if [ "$function_count" -gt "1" ]; then
    echo "❌ ERREUR: $function_count fonction(s) Navigation détectée(s) - duplication du composant!"
    echo "📄 Recherche des fonctions Navigation:"
    grep -nE '(export\s+(default\s+)?function\s+Navigation|const\s+Navigation\s*=\s*\(|function\s+Navigation\s*\()' "$NAV_FILE" || true
    exit 1
  else
    echo "✅ Composant Navigation unique ($function_count fonction)"
  fi
  
  # Compter les éléments <nav> ou className Navigation
  nav_count=$(grep -cE '<nav\s|className.*[Nn]avigation' "$NAV_FILE" 2>/dev/null || echo "0")
  if [ "$nav_count" -gt "2" ]; then
    echo "⚠️ ATTENTION: $nav_count éléments nav détectés (attendu: 1-2)"
  else
    echo "✅ Structure nav correcte ($nav_count élément(s))"
  fi
  
  # Compter les éléments <ul>
  ul_count=$(grep -c '<ul' "$NAV_FILE" 2>/dev/null || echo "0")
  if [ "$ul_count" -gt "3" ]; then
    echo "⚠️ ATTENTION: $ul_count éléments <ul> détectés (attendu: 1-3 pour mobile/desktop)"
  else
    echo "✅ Structure ul correcte ($ul_count élément(s))"
  fi
  
  # Compter les références au logo
  logo_count=$(grep -cE 'logoFile|logo\.svg|[Ll]ogo' "$NAV_FILE" 2>/dev/null || echo "0")
  if [ "$logo_count" -gt "5" ]; then
    echo "⚠️ ATTENTION: $logo_count références au logo détectées (possible duplication)"
  else
    echo "✅ Références logo correctes ($logo_count référence(s))"
  fi
  
  # Vérifier qu'il n'y a qu'un seul export default
  export_count=$(grep -c 'export default' "$NAV_FILE" 2>/dev/null || echo "0")
  if [ "$export_count" -gt "1" ]; then
    echo "❌ ERREUR: $export_count export default détectés - duplication du composant!"
    exit 1
  else
    echo "✅ Export unique ($export_count export default)"
  fi
  
  echo "✅ Toutes les vérifications structurelles passées"
else
  echo "❌ Erreur lors de l'exécution du script Python"
  exit 1
fi
SHEOF
RUN chmod +x /tmp/add_team_link.sh && \
    echo "🔍 VÉRIFICATION: Scripts modifiés:" && \
    echo "=== team-block-script.js ===" && \
    head -10 public/team-block-script.js && \
    echo "=== strategie-script.js ===" && \
    grep -A 2 -B 1 "__blockTeamPages" public/strategie-script.js || echo "❌ Protection non trouvée" && \
    echo "=== config-business.json ===" && \
    grep "jsFile" radar-business/config-business.json

# Exécuter le script
RUN /tmp/add_team_link.sh

# Builder l'application en mode production pour éviter Fast Refresh
# Utiliser WORKDIR pour changer de répertoire de manière fiable
WORKDIR /app/.techradar
RUN npm run build:data
RUN npm run build
# S'assurer que team.html et team-visualization-data.json sont copiés dans out/
# Next.js en mode export copie automatiquement les fichiers de public/, mais vérifions quand même
RUN if [ -d "out" ]; then \
      echo "📁 Contenu de out/ avant copie:" && \
      ls -la out/ | head -10 && \
      echo "" && \
      echo "🔍 Recherche de team.html..." && \
      if [ -f "public/team.html" ]; then \
        cp -v public/team.html out/team.html && echo "✅ team.html copié depuis public/ vers out/"; \
      elif [ -f "/app/public/team.html" ]; then \
        cp -v /app/public/team.html out/team.html && echo "✅ team.html copié depuis /app/public/ vers out/"; \
      else \
        echo "⚠️ team.html introuvable dans public/ ou /app/public/"; \
        echo "📁 Contenu de public/:" && \
        ls -la public/ 2>/dev/null | head -10 || echo "public/ non accessible"; \
        echo "📁 Contenu de /app/public/:" && \
        ls -la /app/public/ 2>/dev/null | head -10 || echo "/app/public/ non accessible"; \
      fi && \
      if [ -f "public/team-visualization-data.json" ]; then \
        cp -v public/team-visualization-data.json out/team-visualization-data.json && echo "✅ team-visualization-data.json copié dans out/"; \
      else \
        echo "⚠️ public/team-visualization-data.json introuvable"; \
      fi && \
      if [ -d "public/team" ]; then \
        mkdir -p out/team && \
        cp -rv public/team/* out/team/ && echo "✅ /team/index.html copié dans out/team/"; \
      elif [ -d "/app/.techradar/public/team" ]; then \
        mkdir -p out/team && \
        cp -rv /app/.techradar/public/team/* out/team/ && echo "✅ /team/index.html copié depuis /app/.techradar/public/team/"; \
      fi && \
      echo "🔍 VÉRIFICATION: team.html dans out/:" && \
      ls -la out/team.html 2>/dev/null || echo "❌ team.html absent de out/" && \
      echo "" && \
      echo "📁 Vérification finale dans out/:" && \
      ls -la out/ | grep -E "(team\.html|team-visualization)" && echo "✅ Fichiers team présents dans out/" || echo "⚠️ Fichiers team non trouvés dans out/"; \
    else \
      echo "❌ Dossier out/ introuvable après build"; \
      ls -la . | head -20; \
      fi && \
      echo "" && \
    echo "📋 Vérification finale de Navigation.tsx après build:" && \
    grep -qE 'href="/team' src/components/Navigation/Navigation.tsx && echo "✅ Lien Équipe toujours présent dans Navigation.tsx après build" || echo "❌ Lien Équipe absent de Navigation.tsx après build" && \
    echo "" && \
    echo "🔍 Vérification des doublons dans le HTML généré..." && \
    if [ -f "out/index.html" ]; then \
      header_count=$(grep -oE '<header|<nav[^>]*>' out/index.html | wc -l | tr -d ' '); \
      nav_count=$(grep -oE '<nav[^>]*>' out/index.html | wc -l | tr -d ' '); \
      logo_count=$(grep -oE 'logo\.svg|logoFile|CoeurBox' out/index.html | wc -l | tr -d ' '); \
      echo "📊 HTML généré: $header_count header/nav, $nav_count nav, $logo_count logo"; \
      if [ "$header_count" -gt "2" ] || [ "$nav_count" -gt "2" ]; then \
        echo "❌ ERREUR: Duplication détectée dans le HTML généré!"; \
        echo "📄 Recherche des headers/nav dans index.html:"; \
        grep -nE '<header|<nav' out/index.html | head -10 || true; \
        exit 1; \
      else \
        echo "✅ HTML généré correct (pas de duplication structurelle)"; \
      fi; \
      if [ "$logo_count" -gt "5" ]; then \
        echo "⚠️ ATTENTION: $logo_count références au logo dans le HTML (possible duplication)"; \
      else \
        echo "✅ Références logo correctes dans le HTML"; \
      fi; \
    else \
      echo "⚠️ out/index.html non trouvé, vérification HTML ignorée"; \
    fi
WORKDIR /app

# Exposition du port interne
EXPOSE 3000

# Démarrage du serveur via script (exporte les variables avant npm run serve)
CMD ["./scripts/start-business.sh"]