import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { 
  BarChart, PieChart, MapPin, Calendar, Home, Settings, 
  Filter, Download, ChevronDown, Info, ArrowUpRight, 
  ArrowDownRight, Clock, X, Check, ThumbsUp, ThumbsDown,
  RefreshCw, AlertTriangle, MessageSquare, Lightbulb,
  Zap, BarChart2, TrendingUp as TrendingUpIcon, Search,
  ArrowUp, ArrowDown, ChevronLeft, ChevronRight, Maximize2,
  Minimize2, XCircle, FileText, BookOpen
} from 'lucide-react';

// Mock data for demonstration
const mockData = {
  totalSites: 1248,
  approvalRate: 68,
  pendingRate: 22,
  unfavorableRate: 10,
  regions: [
    { id: 1, name: 'North', sites: 423, favorable: 302, unfavorable: 42, pending: 79 },
    { id: 2, name: 'South', sites: 289, favorable: 186, unfavorable: 31, pending: 72 },
    { id: 3, name: 'East', sites: 356, favorable: 249, unfavorable: 35, pending: 72 },
    { id: 4, name: 'West', sites: 180, favorable: 112, unfavorable: 17, pending: 51 }
  ],
  technologies: [
    { name: '4G', count: 876 },
    { name: '5G', count: 372 }
  ],
  monthlyTrends: [
    { month: 'Jan', approved: 42, rejected: 12, pending: 18 },
    { month: 'Feb', approved: 48, rejected: 10, pending: 22 },
    { month: 'Mar', approved: 53, rejected: 8, pending: 25 },
    { month: 'Apr', approved: 61, rejected: 11, pending: 19 },
    { month: 'May', approved: 58, rejected: 9, pending: 23 },
    { month: 'Jun', approved: 65, rejected: 7, pending: 28 }
  ],
  recentSites: [
    { id: 'ANF-2024-0123', location: 'Algiers', technology: '5G', status: 'Favorable', date: '2024-06-15' },
    { id: 'ANF-2024-0124', location: 'Oran', technology: '4G', status: 'Pending', date: '2024-06-12' },
    { id: 'ANF-2024-0125', location: 'Constantine', technology: '5G', status: 'Unfavorable', date: '2024-06-10' },
    { id: 'ANF-2024-0126', location: 'Annaba', technology: '4G', status: 'Favorable', date: '2024-06-08' },
    { id: 'ANF-2024-0127', location: 'Batna', technology: '4G', status: 'Favorable', date: '2024-06-05' }
  ],
  // Detailed data for each chart
  detailedData: {
    regions: {
      North: [
        { id: 'ANF-2024-0101', location: 'Algiers', technology: '5G', status: 'Favorable', date: '2024-06-02', population: 3_500_000, density: 'High' },
        { id: 'ANF-2024-0102', location: 'Blida', technology: '4G', status: 'Favorable', date: '2024-06-03', population: 1_002_000, density: 'Medium' },
        { id: 'ANF-2024-0103', location: 'Tizi Ouzou', technology: '4G', status: 'Pending', date: '2024-06-05', population: 1_127_000, density: 'Medium' },
        { id: 'ANF-2024-0104', location: 'Boumerdès', technology: '5G', status: 'Favorable', date: '2024-06-07', population: 802_000, density: 'Medium' },
        { id: 'ANF-2024-0105', location: 'Tipaza', technology: '4G', status: 'Unfavorable', date: '2024-06-08', population: 591_000, density: 'Low' }
      ],
      South: [
        { id: 'ANF-2024-0201', location: 'Adrar', technology: '4G', status: 'Favorable', date: '2024-06-01', population: 455_000, density: 'Very Low' },
        { id: 'ANF-2024-0202', location: 'Tamanrasset', technology: '4G', status: 'Pending', date: '2024-06-04', population: 176_000, density: 'Very Low' },
        { id: 'ANF-2024-0203', location: 'Illizi', technology: '4G', status: 'Pending', date: '2024-06-06', population: 52_000, density: 'Very Low' },
        { id: 'ANF-2024-0204', location: 'Tindouf', technology: '5G', status: 'Unfavorable', date: '2024-06-09', population: 58_000, density: 'Very Low' },
        { id: 'ANF-2024-0205', location: 'Béchar', technology: '4G', status: 'Favorable', date: '2024-06-10', population: 270_000, density: 'Low' }
      ],
      East: [
        { id: 'ANF-2024-0301', location: 'Constantine', technology: '5G', status: 'Favorable', date: '2024-06-02', population: 938_000, density: 'High' },
        { id: 'ANF-2024-0302', location: 'Annaba', technology: '5G', status: 'Favorable', date: '2024-06-05', population: 640_000, density: 'Medium' },
        { id: 'ANF-2024-0303', location: 'Sétif', technology: '4G', status: 'Pending', date: '2024-06-07', population: 1_496_000, density: 'Medium' },
        { id: 'ANF-2024-0304', location: 'Batna', technology: '4G', status: 'Unfavorable', date: '2024-06-09', population: 1_120_000, density: 'Medium' },
        { id: 'ANF-2024-0305', location: 'Guelma', technology: '4G', status: 'Favorable', date: '2024-06-11', population: 482_000, density: 'Low' }
      ],
      West: [
        { id: 'ANF-2024-0401', location: 'Oran', technology: '5G', status: 'Favorable', date: '2024-06-01', population: 1_584_000, density: 'High' },
        { id: 'ANF-2024-0402', location: 'Tlemcen', technology: '4G', status: 'Pending', date: '2024-06-03', population: 949_000, density: 'Medium' },
        { id: 'ANF-2024-0403', location: 'Sidi Bel Abbès', technology: '4G', status: 'Favorable', date: '2024-06-06', population: 604_000, density: 'Medium' },
        { id: 'ANF-2024-0404', location: 'Mostaganem', technology: '5G', status: 'Unfavorable', date: '2024-06-08', population: 746_000, density: 'Medium' },
        { id: 'ANF-2024-0405', location: 'Mascara', technology: '4G', status: 'Pending', date: '2024-06-10', population: 784_000, density: 'Medium' }
      ]
    },
    approvalStatus: {
      Favorable: [
        { id: 'ANF-2024-0501', location: 'Algiers', technology: '5G', region: 'North', date: '2024-06-01', approvalDate: '2024-06-10', processingTime: 9 },
        { id: 'ANF-2024-0502', location: 'Oran', technology: '5G', region: 'West', date: '2024-06-02', approvalDate: '2024-06-09', processingTime: 7 },
        { id: 'ANF-2024-0503', location: 'Constantine', technology: '4G', region: 'East', date: '2024-06-03', approvalDate: '2024-06-15', processingTime: 12 },
        { id: 'ANF-2024-0504', location: 'Annaba', technology: '4G', region: 'East', date: '2024-06-04', approvalDate: '2024-06-18', processingTime: 14 },
        { id: 'ANF-2024-0505', location: 'Blida', technology: '5G', region: 'North', date: '2024-06-05', approvalDate: '2024-06-12', processingTime: 7 }
      ],
      Unfavorable: [
        { id: 'ANF-2024-0601', location: 'Batna', technology: '4G', region: 'East', date: '2024-06-01', rejectionDate: '2024-06-15', processingTime: 14, reason: 'Environmental concerns' },
        { id: 'ANF-2024-0602', location: 'Tindouf', technology: '5G', region: 'South', date: '2024-06-03', rejectionDate: '2024-06-18', processingTime: 15, reason: 'Incomplete documentation' },
        { id: 'ANF-2024-0603', location: 'Mostaganem', technology: '4G', region: 'West', date: '2024-06-05', rejectionDate: '2024-06-20', processingTime: 15, reason: 'Technical incompatibility' },
        { id: 'ANF-2024-0604', location: 'Tipaza', technology: '5G', region: 'North', date: '2024-06-07', rejectionDate: '2024-06-21', processingTime: 14, reason: 'Zoning restrictions' },
        { id: 'ANF-2024-0605', location: 'Béjaïa', technology: '4G', region: 'East', date: '2024-06-09', rejectionDate: '2024-06-25', processingTime: 16, reason: 'Proximity to sensitive area' }
      ],
      Pending: [
        { id: 'ANF-2024-0701', location: 'Sétif', technology: '5G', region: 'East', date: '2024-06-10', currentStage: 'Technical Review', daysInProcess: 20 },
        { id: 'ANF-2024-0702', location: 'Tlemcen', technology: '4G', region: 'West', date: '2024-06-11', currentStage: 'Environmental Assessment', daysInProcess: 19 },
        { id: 'ANF-2024-0703', location: 'Tamanrasset', technology: '4G', region: 'South', date: '2024-06-12', currentStage: 'Initial Screening', daysInProcess: 18 },
        { id: 'ANF-2024-0704', location: 'Tizi Ouzou', technology: '5G', region: 'North', date: '2024-06-13', currentStage: 'Public Consultation', daysInProcess: 17 },
        { id: 'ANF-2024-0705', location: 'Mascara', technology: '4G', region: 'West', date: '2024-06-14', currentStage: 'Final Approval', daysInProcess: 16 }
      ]
    },
    technologies: {
      '4G': [
        { id: 'ANF-2024-0801', location: 'Algiers', region: 'North', status: 'Favorable', date: '2024-06-01', bandwidth: '20 MHz', coverage: '15 km' },
        { id: 'ANF-2024-0802', location: 'Oran', region: 'West', status: 'Favorable', date: '2024-06-03', bandwidth: '15 MHz', coverage: '12 km' },
        { id: 'ANF-2024-0803', location: 'Constantine', region: 'East', status: 'Pending', date: '2024-06-05', bandwidth: '10 MHz', coverage: '10 km' },
        { id: 'ANF-2024-0804', location: 'Adrar', region: 'South', status: 'Unfavorable', date: '2024-06-07', bandwidth: '15 MHz', coverage: '20 km' },
        { id: 'ANF-2024-0805', location: 'Annaba', region: 'East', status: 'Favorable', date: '2024-06-09', bandwidth: '20 MHz', coverage: '15 km' }
      ],
      '5G': [
        { id: 'ANF-2024-0901', location: 'Algiers', region: 'North', status: 'Favorable', date: '2024-06-02', bandwidth: '100 MHz', coverage: '2 km' },
        { id: 'ANF-2024-0902', location: 'Oran', region: 'West', status: 'Pending', date: '2024-06-04', bandwidth: '80 MHz', coverage: '1.5 km' },
        { id: 'ANF-2024-0903', location: 'Constantine', region: 'East', status: 'Favorable', date: '2024-06-06', bandwidth: '100 MHz', coverage: '2 km' },
        { id: 'ANF-2024-0904', location: 'Blida', region: 'North', status: 'Unfavorable', date: '2024-06-08', bandwidth: '60 MHz', coverage: '1 km' },
        { id: 'ANF-2024-0905', location: 'Annaba', region: 'East', status: 'Favorable', date: '2024-06-10', bandwidth: '120 MHz', coverage: '2.5 km' }
      ]
    },
    monthlyData: {
      'Jan': [
        { id: 'ANF-2024-0001', location: 'Algiers', technology: '4G', status: 'Favorable', region: 'North', date: '2024-01-05' },
        { id: 'ANF-2024-0002', location: 'Oran', technology: '5G', status: 'Favorable', region: 'West', date: '2024-01-08' },
        { id: 'ANF-2024-0003', location: 'Constantine', technology: '4G', status: 'Unfavorable', region: 'East', date: '2024-01-12' },
        { id: 'ANF-2024-0004', location: 'Annaba', technology: '5G', status: 'Pending', region: 'East', date: '2024-01-15' },
        { id: 'ANF-2024-0005', location: 'Adrar', technology: '4G', status: 'Favorable', region: 'South', date: '2024-01-20' }
      ],
      'Feb': [
        { id: 'ANF-2024-0006', location: 'Blida', technology: '4G', status: 'Favorable', region: 'North', date: '2024-02-03' },
        { id: 'ANF-2024-0007', location: 'Tlemcen', technology: '5G', status: 'Pending', region: 'West', date: '2024-02-07' },
        { id: 'ANF-2024-0008', location: 'Sétif', technology: '4G', status: 'Favorable', region: 'East', date: '2024-02-10' },
        { id: 'ANF-2024-0009', location: 'Tamanrasset', technology: '4G', status: 'Unfavorable', region: 'South', date: '2024-02-15' },
        { id: 'ANF-2024-0010', location: 'Mostaganem', technology: '5G', status: 'Favorable', region: 'West', date: '2024-02-22' }
      ],
      'Mar': [
        { id: 'ANF-2024-0011', location: 'Tizi Ouzou', technology: '4G', status: 'Favorable', region: 'North', date: '2024-03-02' },
        { id: 'ANF-2024-0012', location: 'Sidi Bel Abbès', technology: '5G', status: 'Favorable', region: 'West', date: '2024-03-08' },
        { id: 'ANF-2024-0013', location: 'Batna', technology: '4G', status: 'Pending', region: 'East', date: '2024-03-12' },
        { id: 'ANF-2024-0014', location: 'Béchar', technology: '5G', status: 'Unfavorable', region: 'South', date: '2024-03-18' },
        { id: 'ANF-2024-0015', location: 'Guelma', technology: '4G', status: 'Favorable', region: 'East', date: '2024-03-25' }
      ],
      'Apr': [
        { id: 'ANF-2024-0016', location: 'Boumerdès', technology: '5G', status: 'Favorable', region: 'North', date: '2024-04-05' },
        { id: 'ANF-2024-0017', location: 'Mascara', technology: '4G', status: 'Pending', region: 'West', date: '2024-04-10' },
        { id: 'ANF-2024-0018', location: 'Béjaïa', technology: '5G', status: 'Favorable', region: 'East', date: '2024-04-15' },
        { id: 'ANF-2024-0019', location: 'Illizi', technology: '4G', status: 'Unfavorable', region: 'South', date: '2024-04-20' },
        { id: 'ANF-2024-0020', location: 'Oran', technology: '5G', status: 'Favorable', region: 'West', date: '2024-04-25' }
      ],
      'May': [
        { id: 'ANF-2024-0021', location: 'Tipaza', technology: '4G', status: 'Favorable', region: 'North', date: '2024-05-03' },
        { id: 'ANF-2024-0022', location: 'Tlemcen', technology: '5G', status: 'Favorable', region: 'West', date: '2024-05-08' },
        { id: 'ANF-2024-0023', location: 'Constantine', technology: '4G', status: 'Pending', region: 'East', date: '2024-05-13' },
        { id: 'ANF-2024-0024', location: 'Tindouf', technology: '5G', status: 'Unfavorable', region: 'South', date: '2024-05-18' },
        { id: 'ANF-2024-0025', location: 'Annaba', technology: '4G', status: 'Favorable', region: 'East', date: '2024-05-23' }
      ],
      'Jun': [
        { id: 'ANF-2024-0026', location: 'Algiers', technology: '5G', status: 'Favorable', region: 'North', date: '2024-06-02' },
        { id: 'ANF-2024-0027', location: 'Oran', technology: '4G', status: 'Pending', region: 'West', date: '2024-06-07' },
        { id: 'ANF-2024-0028', location: 'Sétif', technology: '5G', status: 'Favorable', region: 'East', date: '2024-06-12' },
        { id: 'ANF-2024-0029', location: 'Adrar', technology: '4G', status: 'Unfavorable', region: 'South', date: '2024-06-17' },
        { id: 'ANF-2024-0030', location: 'Blida', technology: '5G', status: 'Favorable', region: 'North', date: '2024-06-22' }
      ]
    }
  }
};

// Mock AI insights with confidence levels
const mockInsights = [
  { 
    id: 1, 
    text: "Approval rates have increased by 5.2% over the last quarter, with the North region showing the highest improvement.", 
    confidence: 0.92,
    category: "trend",
    timestamp: new Date().toISOString(),
    feedbackGiven: false
  },
  { 
    id: 2, 
    text: "The South region has a 25% higher pending rate than other regions, suggesting potential process delays.", 
    confidence: 0.85,
    category: "bottleneck",
    timestamp: new Date().toISOString(),
    feedbackGiven: false
  },
  { 
    id: 3, 
    text: "5G site approvals are processing 15% faster than 4G sites, indicating potential for technology-specific optimization.", 
    confidence: 0.78,
    category: "opportunity",
    timestamp: new Date().toISOString(),
    feedbackGiven: false
  },
  { 
    id: 4, 
    text: "There may be a correlation between site density and approval rates in urban areas, but more data is needed to confirm this pattern.", 
    confidence: 0.62,
    category: "correlation",
    timestamp: new Date().toISOString(),
    feedbackGiven: false
  }
];

const Dashboard = () => {
  const [activeSection, setActiveSection] = useState('overview');
  const [dateRange, setDateRange] = useState('Jan 2024 - Jun 2024');
  const [showFilters, setShowFilters] = useState(false);
  const [selectedRegion, setSelectedRegion] = useState('All Regions');
  const [selectedTechnology, setSelectedTechnology] = useState('All Technologies');
  const [showAIAssistant, setShowAIAssistant] = useState(false);
  const [insights, setInsights] = useState(mockInsights);
  const [isGeneratingInsight, setIsGeneratingInsight] = useState(false);
  const [aiMessage, setAiMessage] = useState('');
  const [aiConversation, setAiConversation] = useState([
    { role: 'assistant', content: 'Bonjour ! Je suis votre assistant d\'analyse de données ANF. Comment puis-je vous aider aujourd\'hui ?' }
  ]);
  const [userInput, setUserInput] = useState('');
  
  // New state for dashboard summarization
  const [dashboardSummary, setDashboardSummary] = useState('');
  const [isGeneratingSummary, setIsGeneratingSummary] = useState(false);
  
  // New state for detail panel
  const [showDetailPanel, setShowDetailPanel] = useState(false);
  const [detailPanelData, setDetailPanelData] = useState([]);
  const [detailPanelTitle, setDetailPanelTitle] = useState('');
  const [detailPanelDescription, setDetailPanelDescription] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'ascending' });
  const [isFullScreen, setIsFullScreen] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  // Simulate data loading
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    // Simulate API call
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  }, []);

  // Reset pagination when data changes
  useEffect(() => {
    setCurrentPage(1);
  }, [detailPanelData, searchQuery]);

  // Function to handle chart element clicks
  const handleChartElementClick = (dataType, dataKey) => {
    let data = [];
    let title = '';
    let description = '';
    
    // Simulate API call or fetch from mockData
    switch(dataType) {
      case 'region':
        data = mockData.detailedData.regions[dataKey] || [];
        title = `Région ${dataKey}`;
        description = `Détails des sites ANF dans la région ${dataKey}`;
        break;
      case 'status':
        data = mockData.detailedData.approvalStatus[dataKey] || [];
        title = `Statut: ${dataKey}`;
        description = `Sites ANF avec le statut ${dataKey}`;
        break;
      case 'technology':
        data = mockData.detailedData.technologies[dataKey] || [];
        title = `Technologie: ${dataKey}`;
        description = `Sites ANF utilisant la technologie ${dataKey}`;
        break;
      case 'month':
        data = mockData.detailedData.monthlyData[dataKey] || [];
        title = `Mois: ${dataKey}`;
        description = `Sites ANF déposés en ${dataKey} 2024`;
        break;
      default:
        data = [];
        title = 'Détails';
        description = 'Informations détaillées';
    }
    
    setDetailPanelData(data);
    setDetailPanelTitle(title);
    setDetailPanelDescription(description);
    setShowDetailPanel(true);
    setSearchQuery('');
    setSortConfig({ key: null, direction: 'ascending' });
  };

  // Function to close detail panel
  const closeDetailPanel = () => {
    setShowDetailPanel(false);
    setTimeout(() => {
      setDetailPanelData([]);
      setDetailPanelTitle('');
      setDetailPanelDescription('');
    }, 300); // Wait for animation to complete
  };

  // Function to toggle fullscreen mode for detail panel
  const toggleFullScreen = () => {
    setIsFullScreen(!isFullScreen);
  };

  // Function to handle sorting
  const requestSort = (key) => {
    let direction = 'ascending';
    if (sortConfig.key === key && sortConfig.direction === 'ascending') {
      direction = 'descending';
    }
    setSortConfig({ key, direction });
  };

  // Function to generate dashboard summary
  const generateDashboardSummary = async () => {
    setIsGeneratingSummary(true);
    
    try {
      // Prepare the dashboard state data to send to the API
      const dashboardState = {
        kpis: {
          totalSites: mockData.totalSites,
          approvalRate: mockData.approvalRate,
          pendingRate: mockData.pendingRate,
          unfavorableRate: mockData.unfavorableRate
        },
        filters: {
          region: selectedRegion,
          technology: selectedTechnology,
          dateRange: dateRange
        },
        insights: insights.map(insight => ({
          text: insight.text,
          confidence: insight.confidence,
          category: insight.category
        })),
        trends: {
          monthly: mockData.monthlyTrends,
          regions: mockData.regions.map(region => ({
            name: region.name,
            sites: region.sites,
            favorable: region.favorable,
            unfavorable: region.unfavorable,
            pending: region.pending
          })),
          technologies: mockData.technologies
        }
      };
      
      // In a real implementation, this would call the summarization API
      // const response = await fetch('https://www.sitebrew.ai/api/20uZR6/genai', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify({
      //     messages: [
      //       { 
      //         role: 'system', 
      //         content: 'You are a data analyst assistant that provides concise, natural language summaries of dashboard data. Summarize the key trends, correlations, and anomalies in 2-3 sentences.' 
      //       },
      //       { 
      //         role: 'user', 
      //         content: `Summarize this dashboard data: ${JSON.stringify(dashboardState)}` 
      //       }
      //     ]
      //   })
      // });
      // const data = await response.json();
      // const summaryText = data.message.content;
      
      // Simulate API response
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      // Generate a summary based on the current dashboard state
      let summaryText = '';
      
      // Different summaries based on selected filters
      if (selectedRegion !== 'All Regions' && selectedTechnology !== 'All Technologies') {
        summaryText = `La région ${selectedRegion} montre un taux d'approbation de ${mockData.approvalRate}% pour les sites ${selectedTechnology}, avec une augmentation de 5,2% par rapport au trimestre précédent. Les délais de traitement sont 15% plus courts que la moyenne nationale, mais 22% des demandes restent en attente, principalement en raison de contraintes environnementales.`;
      } else if (selectedRegion !== 'All Regions') {
        summaryText = `La région ${selectedRegion} représente ${mockData.regions.find(r => r.name === selectedRegion)?.sites || '~30%'} sites ANF, avec un taux d'approbation de ${mockData.approvalRate}%. Les déploiements 5G progressent plus rapidement (+18% ce trimestre) que les sites 4G, et les zones urbaines montrent des taux d'approbation significativement plus élevés que les zones rurales.`;
      } else if (selectedTechnology !== 'All Technologies') {
        summaryText = `Les sites ${selectedTechnology} représentent ${selectedTechnology === '4G' ? '70,2%' : '29,8%'} du total des déploiements ANF, avec un taux d'approbation de ${mockData.approvalRate}%. La tendance montre une augmentation constante des approbations depuis janvier 2024, mais la région Sud présente un taux d'attente 25% plus élevé que les autres régions.`;
      } else {
        summaryText = `Sur 1248 sites ANF, 68% ont reçu un avis favorable, 22% sont en attente et 10% ont été refusés, avec une tendance positive de +5,2% d'approbations ce trimestre. La région Nord montre les meilleurs résultats (71% d'approbation), tandis que le Sud présente un taux d'attente 25% plus élevé que la moyenne. Les sites 5G sont approuvés 15% plus rapidement que les sites 4G.`;
      }
      
      setDashboardSummary(summaryText);
      
    } catch (error) {
      console.error('Error generating summary:', error);
      setDashboardSummary('Impossible de générer un résumé en ce moment. Veuillez réessayer plus tard.');
    } finally {
      setIsGeneratingSummary(false);
    }
  };

  // Function to generate new AI insights based on current filters and data
  const generateNewInsight = useCallback(async () => {
    setIsGeneratingInsight(true);
    
    try {
      // In a real implementation, this would call the LLM API with current dashboard state
      // For demo purposes, we'll simulate an API call with a timeout
      
      // Prepare the prompt based on current filters and data state
      const prompt = `Analyze ANF site data with the following parameters:
        - Region: ${selectedRegion}
        - Technology: ${selectedTechnology}
        - Date Range: ${dateRange}
        - Current approval rate: ${mockData.approvalRate}%
        - Current pending rate: ${mockData.pendingRate}%
        - Current unfavorable rate: ${mockData.unfavorableRate}%
        
        Generate one actionable insight about telecommunications infrastructure deployment based on this data.`;
      
      // This would be a real API call in production
      // const response = await fetch('https://www.sitebrew.ai/api/20uZR6/genai', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify({
      //     messages: [
      //       { role: 'system', content: 'You are an analytics assistant that provides concise, data-driven insights about ANF telecommunications site data.' },
      //       { role: 'user', content: prompt }
      //     ]
      //   })
      // });
      // const data = await response.json();
      // const newInsightText = data.message.content;
      
      // Simulate API response
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      // Generate a random new insight for demonstration
      const newInsightOptions = [
        {
          text: `Dans la région ${selectedRegion === 'All Regions' ? 'Nord' : selectedRegion}, les sites utilisant la technologie ${selectedTechnology === 'All Technologies' ? '5G' : selectedTechnology} montrent un taux d'approbation 12% plus élevé que la moyenne. Considérez prioriser ces déploiements pour des résultats plus rapides.`,
          confidence: 0.88,
          category: "recommendation"
        },
        {
          text: `Les délais d'approbation ont augmenté de 15% dans les zones rurales par rapport au trimestre précédent. Une révision des processus de validation pourrait être nécessaire pour ces régions.`,
          confidence: 0.72,
          category: "alert"
        },
        {
          text: `Il semble y avoir une corrélation entre la densité de population et les taux d'approbation, mais les données actuelles sont insuffisantes pour établir une causalité définitive.`,
          confidence: 0.65,
          category: "correlation"
        }
      ];
      
      const randomInsight = newInsightOptions[Math.floor(Math.random() * newInsightOptions.length)];
      
      // Add the new insight to the list
      const newInsight = {
        id: insights.length + 1,
        text: randomInsight.text,
        confidence: randomInsight.confidence,
        category: randomInsight.category,
        timestamp: new Date().toISOString(),
        feedbackGiven: false
      };
      
      setInsights(prevInsights => [newInsight, ...prevInsights]);
      
    } catch (error) {
      console.error('Error generating insight:', error);
      // Handle error appropriately
    } finally {
      setIsGeneratingInsight(false);
    }
  }, [selectedRegion, selectedTechnology, dateRange, insights]);

  // Function to provide feedback on an insight
  const provideInsightFeedback = (insightId, isPositive) => {
    // In a real implementation, this would send feedback to the backend
    // to improve future insights
    
    setInsights(prevInsights => 
      prevInsights.map(insight => 
        insight.id === insightId 
          ? { ...insight, feedbackGiven: true, positiveRating: isPositive } 
          : insight
      )
    );
    
    // Simulate API call to store feedback
    console.log(`Feedback for insight ${insightId}: ${isPositive ? 'positive' : 'negative'}`);
  };

  // Function to get confidence level text and color
  const getConfidenceInfo = (confidenceScore) => {
    if (confidenceScore >= 0.85) {
      return {
        text: "Confiance élevée",
        color: "text-green-600",
        icon: <Zap size={16} className="text-green-600" />
      };
    } else if (confidenceScore >= 0.7) {
      return {
        text: "Confiance moyenne",
        color: "text-amber-600",
        icon: <Lightbulb size={16} className="text-amber-600" />
      };
    } else {
      return {
        text: "Confiance limitée",
        color: "text-gray-500",
        icon: <AlertTriangle size={16} className="text-gray-500" />
      };
    }
  };

  // Function to get category icon
  const getCategoryIcon = (category) => {
    switch(category) {
      case 'trend':
        return <TrendingUpIcon size={16} />;
      case 'bottleneck':
        return <AlertTriangle size={16} />;
      case 'opportunity':
        return <Lightbulb size={16} />;
      case 'correlation':
        return <BarChart2 size={16} />;
      case 'recommendation':
        return <Zap size={16} />;
      case 'alert':
        return <AlertTriangle size={16} />;
      default:
        return <Info size={16} />;
    }
  };

  // Function to handle sending a message to the AI assistant
  const handleSendMessage = async () => {
    if (!userInput.trim()) return;
    
    const newMessage = { role: 'user', content: userInput };
    setAiConversation(prev => [...prev, newMessage]);
    setUserInput('');
    
    // Simulate "typing" indicator
    setAiMessage('...');
    
    try {
      // In a real implementation, this would call the LLM API
      // const response = await fetch('https://www.sitebrew.ai/api/20uZR6/genai', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify({
      //     messages: [
      //       { role: 'system', content: 'You are an analytics assistant for ANF telecommunications site data. Provide helpful, concise responses about the data and insights.' },
      //       ...aiConversation,
      //       newMessage
      //     ]
      //   })
      // });
      // const data = await response.json();
      // const assistantResponse = data.message.content;
      
      // Simulate API response
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // Generate a response based on the user's input
      let assistantResponse = '';
      const userQuestion = userInput.toLowerCase();
      
      if (userQuestion.includes('région') || userQuestion.includes('region')) {
        assistantResponse = "D'après les données actuelles, la région Nord présente le plus grand nombre de sites ANF (423), suivie par l'Est (356), le Sud (289) et l'Ouest (180). La région Nord a également le taux d'approbation le plus élevé à 71%.";
      } else if (userQuestion.includes('technologie') || userQuestion.includes('5g') || userQuestion.includes('4g')) {
        assistantResponse = "La technologie 4G représente 70,2% des sites ANF (876 sites), tandis que la 5G représente 29,8% (372 sites). Les sites 5G ont un taux d'approbation moyen 8% plus élevé que les sites 4G.";
      } else if (userQuestion.includes('tendance') || userQuestion.includes('trend') || userQuestion.includes('évolution')) {
        assistantResponse = "Les approbations de sites ANF montrent une tendance à la hausse, avec une augmentation de 54,8% de janvier à juin 2024. Le taux d'approbation global est passé de 58% en janvier à 68% en juin.";
      } else if (userQuestion.includes('recommandation') || userQuestion.includes('suggestion')) {
        assistantResponse = "Basé sur les données actuelles, je recommande de:\n\n1. Accélérer le traitement des demandes en attente dans la région Sud, où le taux d'attente est 25% plus élevé que la moyenne\n\n2. Prioriser les déploiements 5G dans les zones urbaines où ils montrent un taux d'approbation supérieur\n\n3. Mettre en place un suivi spécifique pour les sites en attente depuis plus de 45 jours";
      } else {
        assistantResponse = "Je peux vous aider à analyser les données ANF de plusieurs façons. Vous pouvez me demander des informations sur les régions, les technologies, les tendances temporelles, ou des recommandations basées sur les données actuelles. Que souhaitez-vous explorer?";
      }
      
      setAiMessage('');
      setAiConversation(prev => [...prev, { role: 'assistant', content: assistantResponse }]);
      
    } catch (error) {
      console.error('Error sending message:', error);
      setAiMessage('');
      setAiConversation(prev => [...prev, { 
        role: 'assistant', 
        content: "Désolé, j'ai rencontré une erreur en traitant votre demande. Veuillez réessayer." 
      }]);
    }
  };

  // Function to filter detail panel data based on search query
  const filteredData = useMemo(() => {
    if (!searchQuery.trim()) return detailPanelData;
    
    const lowerCaseQuery = searchQuery.toLowerCase();
    return detailPanelData.filter(item => {
      // Search in all string and number properties
      return Object.entries(item).some(([key, value]) => {
        if (typeof value === 'string') {
          return value.toLowerCase().includes(lowerCaseQuery);
        } else if (typeof value === 'number') {
          return value.toString().includes(lowerCaseQuery);
        }
        return false;
      });
    });
  }, [detailPanelData, searchQuery]);

  // Function to sort filtered data
  const sortedData = useMemo(() => {
    if (!sortConfig.key) return filteredData;
    
    return [...filteredData].sort((a, b) => {
      if (a[sortConfig.key] === undefined || b[sortConfig.key] === undefined) {
        return 0;
      }
      
      let comparison = 0;
      if (typeof a[sortConfig.key] === 'string') {
        comparison = a[sortConfig.key].localeCompare(b[sortConfig.key]);
      } else {
        comparison = a[sortConfig.key] - b[sortConfig.key];
      }
      
      return sortConfig.direction === 'ascending' ? comparison : -comparison;
    });
  }, [filteredData, sortConfig]);

  // Pagination
  const paginatedData = useMemo(() => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    return sortedData.slice(startIndex, startIndex + itemsPerPage);
  }, [sortedData, currentPage, itemsPerPage]);

  const totalPages = Math.ceil(sortedData.length / itemsPerPage);

  // Function to get status icon
  const getStatusIcon = (status) => {
    switch(status) {
      case 'Favorable':
        return <div className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center"><Check size={14} className="text-white" /></div>;
      case 'Unfavorable':
        return <div className="w-6 h-6 rounded-full bg-red-500 flex items-center justify-center"><X size={14} className="text-white" /></div>;
      case 'Pending':
        return <div className="w-6 h-6 rounded-full bg-amber-500 flex items-center justify-center"><Clock size={14} className="text-white" /></div>;
      default:
        return null;
    }
  };

  // Function to get table headers based on data
  const getTableHeaders = () => {
    if (detailPanelData.length === 0) return [];
    
    // Get all unique keys from the data
    const allKeys = new Set();
    detailPanelData.forEach(item => {
      Object.keys(item).forEach(key => allKeys.add(key));
    });
    
    // Define priority order for common fields
    const priorityFields = ['id', 'location', 'region', 'technology', 'status', 'date'];
    
    // Sort keys by priority, then alphabetically
    return Array.from(allKeys)
      .sort((a, b) => {
        const indexA = priorityFields.indexOf(a);
        const indexB = priorityFields.indexOf(b);
        
        if (indexA !== -1 && indexB !== -1) {
          return indexA - indexB;
        } else if (indexA !== -1) {
          return -1;
        } else if (indexB !== -1) {
          return 1;
        } else {
          return a.localeCompare(b);
        }
      })
      .filter(key => key !== '_id'); // Exclude MongoDB ID if present
  };

  // Function to format header text
  const formatHeaderText = (header) => {
    // Convert camelCase or snake_case to Title Case with spaces
    return header
      .replace(/([A-Z])/g, ' $1') // Insert space before capital letters
      .replace(/_/g, ' ') // Replace underscores with spaces
      .replace(/^./, str => str.toUpperCase()) // Capitalize first letter
      .trim();
  };

  // Function to format cell value based on key and value
  const formatCellValue = (key, value) => {
    if (value === null || value === undefined) return '-';
    
    if (key === 'date' || key.includes('Date')) {
      // Format dates
      return new Date(value).toLocaleDateString('fr-FR');
    } else if (typeof value === 'boolean') {
      // Format booleans
      return value ? 'Oui' : 'Non';
    } else if (key === 'status') {
      // Format status with color
      return (
        <span className={
          value === 'Favorable' ? 'text-green-600' : 
          value === 'Unfavorable' ? 'text-red-600' : 
          'text-amber-600'
        }>
          {value}
        </span>
      );
    }
    
    return value.toString();
  };

  return (
    <div className="flex h-screen bg-gray-50 font-sans">
      {/* Left Sidebar Navigation */}
      <div className="w-16 md:w-64 bg-[#1A365D] text-white flex flex-col">
        <div className="p-4 border-b border-blue-800 flex items-center justify-center md:justify-start">
          <h1 className="hidden md:block text-xl font-bold">ANF Analytics</h1>
        </div>
        
        <nav className="flex-1 pt-6">
          <NavItem 
            icon={<Home size={20} />} 
            label="Vue d'ensemble" 
            active={activeSection === 'overview'} 
            onClick={() => setActiveSection('overview')} 
          />
          <NavItem 
            icon={<BarChart size={20} />} 
            label="Analyse détaillée" 
            active={activeSection === 'analysis'} 
            onClick={() => setActiveSection('analysis')} 
          />
          <NavItem 
            icon={<Calendar size={20} />} 
            label="Timeline" 
            active={activeSection === 'timeline'} 
            onClick={() => setActiveSection('timeline')} 
          />
          <NavItem 
            icon={<MapPin size={20} />} 
            label="Géographie" 
            active={activeSection === 'geography'} 
            onClick={() => setActiveSection('geography')} 
          />
          <NavItem 
            icon={<Settings size={20} />} 
            label="Paramètres" 
            active={activeSection === 'settings'} 
            onClick={() => setActiveSection('settings')} 
          />
        </nav>
        
        <div className="p-4 border-t border-blue-800 mt-auto">
          <div className="hidden md:block text-sm text-blue-300">
            <p>Dernière mise à jour:</p>
            <p className="font-medium">20 Juin 2024</p>
          </div>
        </div>
      </div>
      
      {/* Main Content Area */}
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* Top Bar */}
        <header className="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
          <div>
            <h1 className="text-xl font-bold text-[#1A365D]">Tableau de Bord ANF</h1>
            <p className="text-sm text-gray-500">Analyse de l'Infrastructure de Télécommunications</p>
          </div>
          
          <div className="flex items-center space-x-4">
            {/* AI Assistant Button */}
            <button 
              className={`flex items-center space-x-2 ${showAIAssistant ? 'bg-[#1A365D]' : 'bg-[#2C7A7B]'} text-white px-3 py-2 rounded-md hover:bg-opacity-90 transition`}
              onClick={() => setShowAIAssistant(!showAIAssistant)}
            >
              <MessageSquare size={16} />
              <span className="hidden md:inline">Assistant IA</span>
            </button>
            
            {/* Date Range Selector */}
            <div className="relative">
              <img 
                src="https://assets.sitebrew.ai/generated-1747563045030.webp" 
                alt="Date Range Selector" 
                className="h-10 cursor-pointer"
                onClick={() => alert('Sélecteur de plage de dates cliqué')}
              />
            </div>
            
            {/* Filter Button */}
            <button 
              className="flex items-center space-x-2 bg-[#2C7A7B] text-white px-3 py-2 rounded-md hover:bg-teal-700 transition"
              onClick={() => setShowFilters(!showFilters)}
            >
              <Filter size={16} />
              <span className="hidden md:inline">Filtres</span>
            </button>
            
            {/* Export Button */}
            <button className="flex items-center space-x-2 bg-gray-100 text-gray-700 px-3 py-2 rounded-md hover:bg-gray-200 transition">
              <Download size={16} />
              <span className="hidden md:inline">Exporter</span>
            </button>
          </div>
        </header>
        
        {/* Main Content */}
        <main className="flex-1 overflow-y-auto p-6">
          {loading ? (
            <div className="flex items-center justify-center h-full">
              <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[#2C7A7B]"></div>
            </div>
          ) : (
            <>
              {/* KPI Cards */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <KpiCard 
                  title="Total Sites ANF" 
                  value={mockData.totalSites} 
                  change={+5.2} 
                  icon={<MapPin className="text-[#2C7A7B]" />} 
                />
                <KpiCard 
                  title="Statut Favorable" 
                  value={`${mockData.approvalRate}%`} 
                  change={+2.1} 
                  icon={<Check className="text-[#2C7A7B]" />} 
                  onClick={() => handleChartElementClick('status', 'Favorable')}
                />
                <KpiCard 
                  title="Approbations en Attente" 
                  value={`${mockData.pendingRate}%`} 
                  change={-1.5} 
                  icon={<Clock className="text-[#2C7A7B]" />} 
                  onClick={() => handleChartElementClick('status', 'Pending')}
                />
                <KpiCard 
                  title="Statut Défavorable" 
                  value={`${mockData.unfavorableRate}%`} 
                  change={-0.8} 
                  icon={<X className="text-[#2C7A7B]" />} 
                  onClick={() => handleChartElementClick('status', 'Unfavorable')}
                />
              </div>
              
              {/* Middle Section - Map and Charts */}
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                {/* Map Section */}
                <div className="bg-white p-6 rounded-lg shadow-sm lg:col-span-1">
                  <div className="flex justify-between items-center mb-4">
                    <h2 className="text-lg font-semibold text-[#1A365D]">Distribution Régionale</h2>
                    <button className="text-sm text-[#2C7A7B] hover:underline">Voir Détails</button>
                  </div>
                  
                  <div className="aspect-square relative">
                    {/* Placeholder for Algeria Map */}
                    <div className="absolute inset-0 flex items-center justify-center bg-gray-100 rounded-md">
                      <div className="text-center">
                        <MapPin size={48} className="mx-auto text-[#2C7A7B] mb-2" />
                        <p className="text-sm text-gray-500">Carte interactive de l'Algérie montrant la distribution des sites ANF</p>
                      </div>
                    </div>
                  </div>
                  
                  <div className="mt-4 space-y-2">
                    {mockData.regions.map(region => (
                      <div 
                        key={region.id} 
                        className="flex items-center justify-between text-sm cursor-pointer hover:bg-gray-50 p-1 rounded transition-colors"
                        onClick={() => handleChartElementClick('region', region.name)}
                      >
                        <span className="text-gray-700">Région {region.name}</span>
                        <div className="flex items-center">
                          <span className="font-medium text-[#1A365D]">{region.sites} sites</span>
                          <div className="ml-2 w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
                            <div 
                              className="h-full bg-[#2C7A7B]" 
                              style={{ width: `${(region.sites / mockData.totalSites) * 100}%` }}
                            ></div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                
                {/* Charts Section */}
                <div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
                  {/* Status Distribution Chart */}
                  <div className="bg-white p-6 rounded-lg shadow-sm">
                    <h2 className="text-lg font-semibold text-[#1A365D] mb-4">Statut d'Approbation</h2>
                    <div 
                      className="flex items-center justify-center h-48 cursor-pointer"
                      onClick={() => handleChartElementClick('status', 'Favorable')}
                    >
                      <img 
                        src="https://assets.sitebrew.ai/generated-1747563043569.webp" 
                        alt="Status Distribution Donut Chart" 
                        className="h-full"
                      />
                    </div>
                    <div className="mt-4 grid grid-cols-3 gap-2">
                      <div 
                        className="flex items-center cursor-pointer hover:bg-gray-50 p-1 rounded transition-colors"
                        onClick={() => handleChartElementClick('status', 'Favorable')}
                      >
                        <div className="w-3 h-3 rounded-full bg-[#38A169] mr-2"></div>
                        <span className="text-xs">Favorable</span>
                      </div>
                      <div 
                        className="flex items-center cursor-pointer hover:bg-gray-50 p-1 rounded transition-colors"
                        onClick={() => handleChartElementClick('status', 'Pending')}
                      >
                        <div className="w-3 h-3 rounded-full bg-[#DD6B20] mr-2"></div>
                        <span className="text-xs">En Attente</span>
                      </div>
                      <div 
                        className="flex items-center cursor-pointer hover:bg-gray-50 p-1 rounded transition-colors"
                        onClick={() => handleChartElementClick('status', 'Unfavorable')}
                      >
                        <div className="w-3 h-3 rounded-full bg-[#E53E3E] mr-2"></div>
                        <span className="text-xs">Défavorable</span>
                      </div>
                    </div>
                  </div>
                  
                  {/* Technology Distribution Chart */}
                  <div className="bg-white p-6 rounded-lg shadow-sm">
                    <h2 className="text-lg font-semibold text-[#1A365D] mb-4">Distribution des Technologies</h2>
                    <div className="h-48 flex items-center justify-center">
                      <div className="w-full">
                        {mockData.technologies.map(tech => (
                          <div 
                            key={tech.name} 
                            className="mb-4 cursor-pointer hover:bg-gray-50 p-1 rounded transition-colors"
                            onClick={() => handleChartElementClick('technology', tech.name)}
                          >
                            <div className="flex justify-between mb-1">
                              <span className="text-sm font-medium text-gray-700">{tech.name}</span>
                              <span className="text-sm text-gray-500">{tech.count} sites</span>
                            </div>
                            <div className="w-full h-2 bg-gray-200 rounded-full">
                              <div 
                                className={`h-full rounded-full ${tech.name === '5G' ? 'bg-[#2C7A7B]' : 'bg-blue-400'}`}
                                style={{ width: `${(tech.count / mockData.totalSites) * 100}%` }}
                              ></div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                    <div className="mt-4">
                      <p className="text-sm text-gray-500">
                        <span className="font-medium text-[#2C7A7B]">70,2%</span> des sites utilisent la technologie 4G, tandis que 
                        <span className="font-medium text-[#2C7A7B]"> 29,8%</span> utilisent la 5G.
                      </p>
                    </div>
                  </div>
                  
                  {/* Monthly Trends Chart */}
                  <div className="bg-white p-6 rounded-lg shadow-sm md:col-span-2">
                    <h2 className="text-lg font-semibold text-[#1A365D] mb-4">Tendances Mensuelles d'Approbation</h2>
                    <div className="h-64">
                      {/* Placeholder for line chart */}
                      <div className="h-full flex items-end">
                        {mockData.monthlyTrends.map((data, index) => (
                          <div 
                            key={index} 
                            className="flex-1 flex flex-col items-center cursor-pointer hover:bg-gray-50 transition-colors"
                            onClick={() => handleChartElementClick('month', data.month)}
                          >
                            <div className="w-full flex justify-center space-x-1">
                              <div 
                                className="w-3 bg-[#38A169]" 
                                style={{ height: `${data.approved * 2}px` }}
                              ></div>
                              <div 
                                className="w-3 bg-[#DD6B20]" 
                                style={{ height: `${data.pending * 2}px` }}
                              ></div>
                              <div 
                                className="w-3 bg-[#E53E3E]" 
                                style={{ height: `${data.rejected * 2}px` }}
                              ></div>
                            </div>
                            <div className="mt-2 text-xs text-gray-500">{data.month}</div>
                          </div>
                        ))}
                      </div>
                    </div>
                    <div className="mt-4 flex justify-center space-x-6">
                      <div className="flex items-center">
                        <div className="w-3 h-3 rounded-full bg-[#38A169] mr-2"></div>
                        <span className="text-xs">Favorable</span>
                      </div>
                      <div className="flex items-center">
                        <div className="w-3 h-3 rounded-full bg-[#DD6B20] mr-2"></div>
                        <span className="text-xs">En Attente</span>
                      </div>
                      <div className="flex items-center">
                        <div className="w-3 h-3 rounded-full bg-[#E53E3E] mr-2"></div>
                        <span className="text-xs">Défavorable</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              {/* AI Insights Panel - Enhanced Version */}
              <div className="mb-8 bg-white rounded-lg shadow-sm overflow-hidden border border-[#2C7A7B]">
                <div className="bg-[#1A365D] text-white p-4 flex items-center justify-between">
                  <div className="flex items-center">
                    <Lightbulb size={20} className="mr-2" />
                    <h2 className="text-lg font-semibold">Insights IA</h2>
                  </div>
                  <div className="flex items-center space-x-2">
                    <button 
                      className={`p-2 rounded-md ${isGeneratingInsight ? 'bg-blue-700 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'} transition`}
                      onClick={generateNewInsight}
                      disabled={isGeneratingInsight}
                    >
                      <RefreshCw size={16} className={`${isGeneratingInsight ? 'animate-spin' : ''}`} />
                    </button>
                  </div>
                </div>
                
                <div className="p-4 max-h-80 overflow-y-auto">
                  {insights.length === 0 ? (
                    <div className="text-center py-8 text-gray-500">
                      <AlertTriangle size={24} className="mx-auto mb-2" />
                      <p>Aucun insight disponible. Cliquez sur le bouton de rafraîchissement pour générer des insights.</p>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {insights.map(insight => {
                        const confidenceInfo = getConfidenceInfo(insight.confidence);
                        return (
                          <div key={insight.id} className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                            <div className="flex items-start">
                              <div className="mr-3 mt-1 p-2 rounded-full bg-[#2C7A7B] bg-opacity-10">
                                {getCategoryIcon(insight.category)}
                              </div>
                              <div className="flex-1">
                                <p className="text-gray-800 mb-2">{insight.text}</p>
                                <div className="flex items-center justify-between">
                                  <div className="flex items-center text-xs">
                                    {confidenceInfo.icon}
                                    <span className={`ml-1 ${confidenceInfo.color}`}>
                                      {confidenceInfo.text}
                                    </span>
                                  </div>
                                  
                                  {!insight.feedbackGiven ? (
                                    <div className="flex items-center space-x-2">
                                      <button 
                                        className="p-1 text-gray-500 hover:text-green-600 transition"
                                        onClick={() => provideInsightFeedback(insight.id, true)}
                                        title="Utile"
                                      >
                                        <ThumbsUp size={14} />
                                      </button>
                                      <button 
                                        className="p-1 text-gray-500 hover:text-red-600 transition"
                                        onClick={() => provideInsightFeedback(insight.id, false)}
                                        title="Pas utile"
                                      >
                                        <ThumbsDown size={14} />
                                      </button>
                                    </div>
                                  ) : (
                                    <div className="text-xs text-gray-500">
                                      Merci pour votre feedback
                                    </div>
                                  )}
                                </div>
                              </div>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              </div>
              
              {/* Bottom Section - Data Table */}
              <div className="bg-white rounded-lg shadow-sm overflow-hidden">
                <div className="p-6 border-b border-gray-200">
                  <div className="flex justify-between items-center">
                    <h2 className="text-lg font-semibold text-[#1A365D]">Demandes de Sites ANF Récentes</h2>
                    <button className="text-sm text-[#2C7A7B] hover:underline">Voir Tout</button>
                  </div>
                </div>
                
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID Site</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Emplacement</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Technologie</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {mockData.recentSites.map((site, index) => (
                        <tr 
                          key={site.id} 
                          className={`${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'} hover:bg-gray-100 cursor-pointer transition-colors`}
                          onClick={() => {
                            // Determine which data type to fetch based on the site
                            const dataType = site.status === 'Favorable' ? 'status' : 
                                            site.status === 'Unfavorable' ? 'status' : 
                                            site.status === 'Pending' ? 'status' : 'technology';
                            const dataKey = site.status === 'Favorable' ? 'Favorable' : 
                                          site.status === 'Unfavorable' ? 'Unfavorable' : 
                                          site.status === 'Pending' ? 'Pending' : site.technology;
                            handleChartElementClick(dataType, dataKey);
                          }}
                        >
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-[#1A365D]">{site.id}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{site.location}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{site.technology}</td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="flex items-center">
                              {getStatusIcon(site.status)}
                              <span className={`ml-2 text-sm ${
                                site.status === 'Favorable' ? 'text-green-600' : 
                                site.status === 'Unfavorable' ? 'text-red-600' : 
                                'text-amber-600'
                              }`}>
                                {site.status}
                              </span>
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{site.date}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                
                <div className="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
                  <div className="text-sm text-gray-500">
                    Affichage de <span className="font-medium">5</span> sur <span className="font-medium">42</span> entrées
                  </div>
                  <div className="flex space-x-2">
                    <button className="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50">Précédent</button>
                    <button className="px-3 py-1 bg-[#2C7A7B] text-white rounded-md text-sm hover:bg-teal-700">Suivant</button>
                  </div>
                </div>
              </div>
            </>
          )}
        </main>
      </div>
      
      {/* Filter Panel */}
      {showFilters && (
        <div className="fixed inset-0 bg-black bg-opacity-30 z-40 flex justify-end">
          <div className="w-80 bg-white h-full shadow-lg p-6 overflow-y-auto">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-lg font-semibold text-[#1A365D]">Filtrer les Données</h2>
              <button 
                className="text-gray-500 hover:text-gray-700"
                onClick={() => setShowFilters(false)}
              >
                <X size={20} />
              </button>
            </div>
            
            <div className="space-y-6">
              {/* Region Filter */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Région</label>
                <div className="relative">
                  <img 
                    src="https://assets.sitebrew.ai/generated-1747563043470.webp" 
                    alt="Region Filter" 
                    className="w-full cursor-pointer"
                    onClick={() => alert('Filtre de région cliqué')}
                  />
                </div>
              </div>
              
              {/* Technology Filter */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Technologie</label>
                <div className="relative">
                  <select 
                    className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-[#2C7A7B] focus:border-[#2C7A7B] sm:text-sm rounded-md"
                    value={selectedTechnology}
                    onChange={(e) => setSelectedTechnology(e.target.value)}
                  >
                    <option>Toutes Technologies</option>
                    <option>4G</option>
                    <option>5G</option>
                  </select>
                </div>
              </div>
              
              {/* Status Filter */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Statut</label>
                <div className="space-y-2">
                  <div className="flex items-center">
                    <input type="checkbox" id="status-favorable" className="h-4 w-4 text-[#2C7A7B] focus:ring-[#2C7A7B] border-gray-300 rounded" defaultChecked />
                    <label htmlFor="status-favorable" className="ml-2 block text-sm text-gray-700">
                      Favorable
                    </label>
                  </div>
                  <div className="flex items-center">
                    <input type="checkbox" id="status-unfavorable" className="h-4 w-4 text-[#2C7A7B] focus:ring-[#2C7A7B] border-gray-300 rounded" defaultChecked />
                    <label htmlFor="status-unfavorable" className="ml-2 block text-sm text-gray-700">
                      Défavorable
                    </label>
                  </div>
                  <div className="flex items-center">
                    <input type="checkbox" id="status-pending" className="h-4 w-4 text-[#2C7A7B] focus:ring-[#2C7A7B] border-gray-300 rounded" defaultChecked />
                    <label htmlFor="status-pending" className="ml-2 block text-sm text-gray-700">
                      En Attente
                    </label>
                  </div>
                </div>
              </div>
              
              {/* Date Range Filter */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Plage de Dates</label>
                <div className="relative">
                  <img 
                    src="https://assets.sitebrew.ai/generated-1747563045030.webp" 
                    alt="Date Range Selector" 
                    className="w-full cursor-pointer"
                    onClick={() => alert('Sélecteur de plage de dates cliqué')}
                  />
                </div>
              </div>
              
              <div className="pt-4 border-t border-gray-200 flex space-x-3">
                <button 
                  className="flex-1 bg-gray-100 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-200 transition"
                  onClick={() => {
                    setSelectedRegion('All Regions');
                    setSelectedTechnology('All Technologies');
                  }}
                >
                  Réinitialiser
                </button>
                <button 
                  className="flex-1 bg-[#2C7A7B] text-white py-2 px-4 rounded-md hover:bg-teal-700 transition"
                  onClick={() => setShowFilters(false)}
                >
                  Appliquer
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      
      {/* AI Assistant Chat Panel */}
      {showAIAssistant && (
        <div className="fixed bottom-4 right-4 w-96 h-[600px] bg-white rounded-lg shadow-xl z-50 flex flex-col overflow-hidden border border-[#2C7A7B]">
          <div className="bg-[#1A365D] text-white p-4 flex items-center justify-between">
            <div className="flex items-center">
              <MessageSquare size={18} className="mr-2" />
              <h3 className="font-medium">Assistant Analytique ANF</h3>
            </div>
            <button 
              className="text-white hover:text-gray-200"
              onClick={() => setShowAIAssistant(false)}
            >
              <X size={18} />
            </button>
          </div>
          
          {/* Dashboard Summary Button */}
          <div className="p-4 bg-gray-50 border-b border-gray-200">
            <button 
              className={`w-full flex items-center justify-center space-x-2 ${
                isGeneratingSummary ? 'bg-gray-300 cursor-not-allowed' : 'bg-[#2C7A7B] hover:bg-teal-700'
              } text-white px-4 py-2 rounded-md transition`}
              onClick={generateDashboardSummary}
              disabled={isGeneratingSummary}
            >
              <FileText size={16} className={isGeneratingSummary ? 'animate-pulse' : ''} />
              <span>{isGeneratingSummary ? 'Génération en cours...' : 'Résumer le tableau de bord'}</span>
            </button>
          </div>
          
          {/* Dashboard Summary Display */}
          {dashboardSummary && (
            <div className="p-4 bg-[#1A365D] bg-opacity-5 border-b border-gray-200">
              <div className="flex items-start">
                <BookOpen size={18} className="text-[#1A365D] mr-2 mt-1 flex-shrink-0" />
                <div>
                  <h4 className="text-sm font-semibold text-[#1A365D] mb-1">Vue d'ensemble rapide</h4>
                  <p className="text-sm text-gray-700">{dashboardSummary}</p>
                </div>
              </div>
            </div>
          )}
          
          <div className="flex-1 p-4 overflow-y-auto bg-gray-50">
            {aiConversation.map((message, index) => (
              <div 
                key={index} 
                className={`mb-4 ${message.role === 'assistant' ? 'flex' : 'flex justify-end'}`}
              >
                <div 
                  className={`max-w-[80%] p-3 rounded-lg ${
                    message.role === 'assistant' 
                      ? 'bg-white border border-gray-200' 
                      : 'bg-[#2C7A7B] text-white'
                  }`}
                >
                  <p className="text-sm whitespace-pre-line">{message.content}</p>
                </div>
              </div>
            ))}
            {aiMessage && (
              <div className="mb-4 flex">
                <div className="max-w-[80%] p-3 rounded-lg bg-white border border-gray-200">
                  <div className="flex space-x-1">
                    <div className="h-2 w-2 bg-gray-300 rounded-full animate-bounce"></div>
                    <div className="h-2 w-2 bg-gray-300 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                    <div className="h-2 w-2 bg-gray-300 rounded-full animate-bounce" style={{ animationDelay: '0.4s' }}></div>
                  </div>
                </div>
              </div>
            )}
          </div>
          
          <div className="p-4 border-t border-gray-200 bg-white">
            <div className="flex items-center">
              <input 
                type="text" 
                className="flex-1 border border-gray-300 rounded-l-md py-2 px-3 focus:outline-none focus:ring-1 focus:ring-[#2C7A7B] focus:border-[#2C7A7B]"
                placeholder="Posez une question sur les données ANF..."
                value={userInput}
                onChange={(e) => setUserInput(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
              />
              <button 
                className="bg-[#2C7A7B] text-white py-2 px-3 rounded-r-md hover:bg-teal-700 transition"
                onClick={handleSendMessage}
              >
                <MessageSquare size={18} />
              </button>
            </div>
            <div className="mt-2 text-xs text-gray-500">
              <p>Exemples: "Quelle région a le plus de sites?", "Tendances des approbations", "Recommandations"</p>
            </div>
          </div>
        </div>
      )}
      
      {/* Detail Panel - Sliding from right */}
      {showDetailPanel && (
        <div 
          className={`fixed inset-0 bg-black bg-opacity-30 z-50 flex ${isFullScreen ? 'justify-center' : 'justify-end'} transition-all duration-300`}
          onClick={(e) => {
            // Close panel when clicking outside
            if (e.target === e.currentTarget) {
              closeDetailPanel();
            }
          }}
        >
          <div 
            className={`bg-white shadow-xl flex flex-col overflow-hidden transition-all duration-300 ease-in-out transform ${
              isFullScreen ? 'w-full h-full' : 'w-[90%] md:w-[70%] lg:w-[60%] h-full'
            } ${showDetailPanel ? 'translate-x-0' : 'translate-x-full'}`}
          >
            {/* Panel Header */}
            <div className="bg-[#1A365D] text-white p-4 flex items-center justify-between">
              <div>
                <h2 className="text-lg font-semibold">{detailPanelTitle}</h2>
                <p className="text-sm text-blue-200">{detailPanelDescription}</p>
              </div>
              <div className="flex items-center space-x-2">
                <button 
                  className="p-2 rounded-md hover:bg-blue-800 transition"
                  onClick={toggleFullScreen}
                  title={isFullScreen ? "Réduire" : "Agrandir"}
                >
                  {isFullScreen ? <Minimize2 size={18} /> : <Maximize2 size={18} />}
                </button>
                <button 
                  className="p-2 rounded-md hover:bg-blue-800 transition"
                  onClick={closeDetailPanel}
                  title="Fermer"
                >
                  <X size={18} />
                </button>
              </div>
            </div>
            
            {/* Search and Controls */}
            <div className="p-4 border-b border-gray-200 bg-gray-50">
              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div className="relative flex-1">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <Search size={16} className="text-gray-400" />
                  </div>
                  <input
                    type="text"
                    className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-[#2C7A7B] focus:border-[#2C7A7B] sm:text-sm"
                    placeholder="Rechercher..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
                
                <div className="flex items-center space-x-2">
                  <select
                    className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-[#2C7A7B] focus:border-[#2C7A7B] sm:text-sm rounded-md"
                    value={itemsPerPage}
                    onChange={(e) => setItemsPerPage(Number(e.target.value))}
                  >
                    <option value={5}>5 par page</option>
                    <option value={10}>10 par page</option>
                    <option value={20}>20 par page</option>
                    <option value={50}>50 par page</option>
                  </select>
                  
                  <button 
                    className="flex items-center space-x-2 bg-[#2C7A7B] text-white px-3 py-2 rounded-md hover:bg-teal-700 transition"
                    onClick={() => alert('Export clicked')}
                  >
                    <Download size={16} />
                    <span className="hidden md:inline">Exporter</span>
                  </button>
                </div>
              </div>
              
              <div className="mt-2 text-sm text-gray-500">
                {sortedData.length > 0 ? (
                  <p>
                    Affichage de {Math.min((currentPage - 1) * itemsPerPage + 1, sortedData.length)} à {Math.min(currentPage * itemsPerPage, sortedData.length)} sur {sortedData.length} résultats
                    {searchQuery && ` (filtrés de ${detailPanelData.length} total)`}
                  </p>
                ) : (
                  <p>Aucun résultat trouvé</p>
                )}
              </div>
            </div>
            
            {/* Table Content */}
            <div className="flex-1 overflow-auto">
              {paginatedData.length > 0 ? (
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50 sticky top-0">
                    <tr>
                      {getTableHeaders().map(header => (
                        <th 
                          key={header}
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
                          onClick={() => requestSort(header)}
                        >
                          <div className="flex items-center">
                            {formatHeaderText(header)}
                            {sortConfig.key === header && (
                              <span className="ml-1">
                                {sortConfig.direction === 'ascending' ? (
                                  <ArrowUp size={14} />
                                ) : (
                                  <ArrowDown size={14} />
                                )}
                              </span>
                            )}
                          </div>
                        </th>
                      ))}
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {paginatedData.map((item, index) => (
                      <tr key={item.id || index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
                        {getTableHeaders().map(header => (
                          <td key={`${item.id || index}-${header}`} className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {formatCellValue(header, item[header])}
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              ) : (
                <div className="flex flex-col items-center justify-center h-64">
                  <XCircle size={48} className="text-gray-300 mb-4" />
                  <p className="text-gray-500">Aucune donnée trouvée</p>
                  {searchQuery && (
                    <button 
                      className="mt-4 text-[#2C7A7B] hover:underline"
                      onClick={() => setSearchQuery('')}
                    >
                      Effacer la recherche
                    </button>
                  )}
                </div>
              )}
            </div>
            
            {/* Pagination */}
            {sortedData.length > 0 && (
              <div className="p-4 border-t border-gray-200 bg-white">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <button
                      className={`px-3 py-1 rounded-md ${
                        currentPage === 1 
                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed' 
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                      onClick={() => setCurrentPage(1)}
                      disabled={currentPage === 1}
                    >
                      <ChevronLeft size={16} />
                      <ChevronLeft size={16} className="-ml-2" />
                    </button>
                    <button
                      className={`px-3 py-1 rounded-md ${
                        currentPage === 1 
                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed' 
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                      onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
                      disabled={currentPage === 1}
                    >
                      <ChevronLeft size={16} />
                    </button>
                  </div>
                  
                  <div className="hidden md:flex items-center space-x-1">
                    {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                      // Calculate page numbers to show (centered around current page)
                      let pageNum;
                      if (totalPages <= 5) {
                        pageNum = i + 1;
                      } else if (currentPage <= 3) {
                        pageNum = i + 1;
                      } else if (currentPage >= totalPages - 2) {
                        pageNum = totalPages - 4 + i;
                      } else {
                        pageNum = currentPage - 2 + i;
                      }
                      
                      return (
                        <button
                          key={pageNum}
                          className={`px-3 py-1 rounded-md ${
                            currentPage === pageNum
                              ? 'bg-[#2C7A7B] text-white'
                              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                          }`}
                          onClick={() => setCurrentPage(pageNum)}
                        >
                          {pageNum}
                        </button>
                      );
                    })}
                  </div>
                  
                  <div className="md:hidden text-sm text-gray-500">
                    Page {currentPage} sur {totalPages}
                  </div>
                  
                  <div className="flex items-center space-x-2">
                    <button
                      className={`px-3 py-1 rounded-md ${
                        currentPage === totalPages
                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                      onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
                      disabled={currentPage === totalPages}
                    >
                      <ChevronRight size={16} />
                    </button>
                    <button<ant_artifact identifier="DashboardCode_v1" title="ANF Dashboard with Enhanced Detail Panel & AI Insights">
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { 
  BarChart, PieChart, MapPin, Calendar, Home, Settings, 
  Filter, Download, ChevronDown, Info, ArrowUpRight, 
  ArrowDownRight, Clock, X, Check, ThumbsUp, ThumbsDown,
  RefreshCw, AlertTriangle, MessageSquare, Lightbulb,
  Zap, BarChart2, TrendingUp as TrendingUpIcon, Search,
  ArrowUp, ArrowDown, ChevronLeft, ChevronRight, Maximize2,
  Minimize2, XCircle
} from 'lucide-react';

// ... (previous code remains the same)
const mockData = {
  totalSites: 1248,
  approvalRate: 68,
  pendingRate: 22,
  unfavorableRate: 10,
  regions: [
    { id: 1, name: 'North', sites: 423, favorable: 302, unfavorable: 42, pending: 79 },
    { id: 2, name: 'South', sites: 289, favorable: 186, unfavorable: 31, pending: 72 },
    { id: 3, name: 'East', sites: 356, favorable: 249, unfavorable: 35, pending: 72 },
    { id: 4, name: 'West', sites: 180, favorable: 112, unfavorable: 17, pending: 51 }
  ],
  technologies: [
    { name: '4G', count: 876 },
    { name: '5G', count: 372 }
  ],
  monthlyTrends: [
    { month: 'Jan', approved: 42, rejected: 12, pending: 18 },
    { month: 'Feb', approved: 48, rejected: 10, pending: 22 },
    { month: 'Mar', approved: 53, rejected: 8, pending: 25 },
    { month: 'Apr', approved: 61, rejected: 11, pending: 19 },
    { month: 'May', approved: 58, rejected: 9, pending: 23 },
    { month: 'Jun', approved: 65, rejected: 7, pending: 28 }
  ],
  recentSites: [
    { id: 'ANF-2024-0123', location: 'Algiers', technology: '5G', status: 'Favorable', date: '2024-06-15' },
    { id: 'ANF-2024-0124', location: 'Oran', technology: '4G', status: 'Pending', date: '2024-06-12' },
    { id: 'ANF-2024-0125', location: 'Constantine', technology: '5G', status: 'Unfavorable', date: '2024-06-10' },
    { id: 'ANF-2024-0126', location: 'Annaba', technology: '4G', status: 'Favorable', date: '2024-06-08' },
    { id: 'ANF-2024-0127', location: 'Batna', technology: '4G', status: 'Favorable', date: '2024-06-05' }
  ],
  // Detailed data for each chart
  detailedData: {
    regions: {
      North: [
        { id: 'ANF-2024-0101', location: 'Algiers', technology: '5G', status: 'Favorable', date: '2024-06-02', population: 3_500_000, density: 'High' },
        { id: 'ANF-2024-0102', location: 'Blida', technology: '4G', status: 'Favorable', date: '2024-06-03', population: 1_002_000, density: 'Medium' },
        { id: 'ANF-2024-0103', location: 'Tizi Ouzou', technology: '4G', status: 'Pending', date: '2024-06-05', population: 1_127_000, density: 'Medium' },
        { id: 'ANF-2024-0104', location: 'Boumerdès', technology: '5G', status: 'Favorable', date: '2024-06-07', population: 802_000, density: 'Medium' },
        { id: 'ANF-2024-0105', location: 'Tipaza', technology: '4G', status: 'Unfavorable', date: '2024-06-08', population: 591_000, density: 'Low' }
      ],
      South: [
        { id: 'ANF-2024-0201', location: 'Adrar', technology: '4G', status: 'Favorable', date: '2024-06-01', population: 455_000, density: 'Very Low' },
        { id: 'ANF-2024-0202', location: 'Tamanrasset', technology: '4G', status: 'Pending', date: '2024-06-04', population: 176_000, density: 'Very Low' },
        { id: 'ANF-2024-0203', location: 'Illizi', technology: '4G', status: 'Pending', date: '2024-06-06', population: 52_000, density: 'Very Low' },
        { id: 'ANF-2024-0204', location: 'Tindouf', technology: '5G', status: 'Unfavorable', date: '2024-06-09', population: 58_000, density: 'Very Low' },
        { id: 'ANF-2024-0205', location: 'Béchar', technology: '4G', status: 'Favorable', date: '2024-06-10', population: 270_000, density: 'Low' }
      ],
      East: [
        { id: 'ANF-2024-0301', location: 'Constantine', technology: '5G', status: 'Favorable', date: '2024-06-02', population: 938_000, density: 'High' },
        { id: 'ANF-2024-0302', location: 'Annaba', technology: '5G', status: 'Favorable', date: '2024-06-05', population: 640_000, density: 'Medium' },
        { id: 'ANF-2024-0303', location: 'Sétif', technology: '4G', status: 'Pending', date: '2024-06-07', population: 1_496_000, density: 'Medium' },
        { id: 'ANF-2024-0304', location: 'Batna', technology: '4G', status: 'Unfavorable', date: '2024-06-09', population: 1_120_000, density: 'Medium' },
        { id: 'ANF-2024-0305', location: 'Guelma', technology: '4G', status: 'Favorable', date: '2024-06-11', population: 482_000, density: 'Low' }
      ],
      West: [
        { id: 'ANF-2024-0401', location: 'Oran', technology: '5G', status: 'Favorable', date: '2024-06-01', population: 1_584_000, density: 'High' },
        { id: 'ANF-2024-0402', location: 'Tlemcen', technology: '4G', status: 'Pending', date: '2024-06-03', population: 949_000, density: 'Medium' },
        { id: 'ANF-2024-0403', location: 'Sidi Bel Abbès', technology: '4G', status: 'Favorable', date: '2024-06-06', population: 604_000, density: 'Medium' },
        { id: 'ANF-2024-0404', location: 'Mostaganem', technology: '5G', status: 'Unfavorable', date: '2024-06-08', population: 746_000, density: 'Medium' },
        { id: 'ANF-2024-0405', location: 'Mascara', technology: '4G', status: 'Pending', date: '2024-06-10', population: 784_000, density: 'Medium' }
      ]
    },
    approvalStatus: {
      Favorable: [
        { id: 'ANF-2024-0501', location: 'Algiers', technology: '5G', region: 'North', date: '2024-06-01', approvalDate: '2024-06-10', processingTime: 9 },
        { id: 'ANF-2024-0502', location: 'Oran', technology: '5G', region: 'West', date: '2024-06-02', approvalDate: '2024-06-09', processingTime: 7 },
        { id: 'ANF-2024-0503', location: 'Constantine', technology: '4G', region: 'East', date: '2024-06-03', approvalDate: '2024-06-15', processingTime: 12 },
        { id: 'ANF-2024-0504', location: 'Annaba', technology: '4G', region: 'East', date: '2024-06-04', approvalDate: '2024-06-18', processingTime: 14 },
        { id: 'ANF-2024-0505', location: 'Blida', technology: '5G', region: 'North', date: '2024-06-05', approvalDate: '2024-06-12', processingTime: 7 }
      ],
      Unfavorable: [
        { id: 'ANF-2024-0601', location: 'Batna', technology: '4G', region: 'East', date: '2024-06-01', rejectionDate: '2024-06-15', processingTime: 14, reason: 'Environmental concerns' },
        { id: 'ANF-2024-0602', location: 'Tindouf', technology: '5G', region: 'South', date: '2024-06-03', rejectionDate: '2024-06-18', processingTime: 15, reason: 'Incomplete documentation' },
        { id: 'ANF-2024-0603', location: 'Mostaganem', technology: '4G', region: 'West', date: '2024-06-05', rejectionDate: '2024-06-20', processingTime: 15, reason: 'Technical incompatibility' },
        { id: 'ANF-2024-0604', location: 'Tipaza', technology: '5G', region: 'North', date: '2024-06-07', rejectionDate: '2024-06-21', processingTime: 14, reason: 'Zoning restrictions' },
        { id: 'ANF-2024-0605', location: 'Béjaïa', technology: '4G', region: 'East', date: '2024-06-09', rejectionDate: '2024-06-25', processingTime: 16, reason: 'Proximity to sensitive area' }
      ],
      Pending: [
        { id: 'ANF-2024-0701', location: 'Sétif', technology: '5G', region: 'East', date: '2024-06-10', currentStage: 'Technical Review', daysInProcess: 20 },
        { id: 'ANF-2024-0702', location: 'Tlemcen', technology: '4G', region: 'West', date: '2024-06-11', currentStage: 'Environmental Assessment', daysInProcess: 19 },
        { id: 'ANF-2024-0703', location: 'Tamanrasset', technology: '4G', region: 'South', date: '2024-06-12', currentStage: 'Initial Screening', daysInProcess: 18 },
        { id: 'ANF-2024-0704', location: 'Tizi Ouzou', technology: '5G', region: 'North', date: '2024-06-13', currentStage: 'Public Consultation', daysInProcess: 17 },
        { id: 'ANF-2024-0705', location: 'Mascara', technology: '4G', region: 'West', date: '2024-06-14', currentStage: 'Final Approval', daysInProcess: 16 }
      ]
    },
    technologies: {
      '4G': [
        { id: 'ANF-2024-0801', location: 'Algiers', region: 'North', status: 'Favorable', date: '2024-06-01', bandwidth: '20 MHz', coverage: '15 km' },
        { id: 'ANF-2024-0802', location: 'Oran', region: 'West', status: 'Favorable', date: '2024-06-03', bandwidth: '15 MHz', coverage: '12 km' },
        { id: 'ANF-2024-0803', location: 'Constantine', region: 'East', status: 'Pending', date: '2024-06-05', bandwidth: '10 MHz', coverage: '10 km' },
        { id: 'ANF-2024-0804', location: 'Adrar', region: 'South', status: 'Unfavorable', date: '2024-06-07', bandwidth: '15 MHz', coverage: '20 km' },
        { id: 'ANF-2024-0805', location: 'Annaba', region: 'East', status: 'Favorable', date: '2024-06-09', bandwidth: '20 MHz', coverage: '15 km' }
      ],
      '5G': [
        { id: 'ANF-2024-0901', location: 'Algiers', region: 'North', status: 'Favorable', date: '2024-06-02', bandwidth: '100 MHz', coverage: '2 km' },
        { id: 'ANF-2024-0902', location: 'Oran', region: 'West', status: 'Pending', date: '2024-06-04', bandwidth: '80 MHz', coverage: '1.5 km' },
        { id: 'ANF-2024-0903', location: 'Constantine', region: 'East', status: 'Favorable', date: '2024-06-06', bandwidth: '100 MHz', coverage: '2 km' },
        { id: 'ANF-2024-0904', location: 'Blida', region: 'North', status: 'Unfavorable', date: '2024-06-08', bandwidth: '60 MHz', coverage: '1 km' },
        { id: 'ANF-2024-0905', location: 'Annaba', region: 'East', status: 'Favorable', date: '2024-06-10', bandwidth: '120 MHz', coverage: '2.5 km' }
      ]
    },
    monthlyData: {
      'Jan': [
        { id: 'ANF-2024-0001', location: 'Algiers', technology: '4G', status: 'Favorable', region: 'North', date: '2024-01-05' },
        { id: 'ANF-2024-0002', location: 'Oran', technology: '5G', status: 'Favorable', region: 'West', date: '2024-01-08' },
        { id: 'ANF-2024-0003', location: 'Constantine', technology: '4G', status: 'Unfavorable', region: 'East', date: '2024-01-12' },
        { id: 'ANF-2024-0004', location: 'Annaba', technology: '5G', status: 'Pending', region: 'East', date: '2024-01-15' },
        { id: 'ANF-2024-0005', location: 'Adrar', technology: '4G', status: 'Favorable', region: 'South', date: '2024-01-20' }
      ],
      'Feb': [
        { id: 'ANF-2024-0006', location: 'Blida', technology: '4G', status: 'Favorable', region: 'North', date: '2024-02-03' },
        { id: 'ANF-2024-0007', location: 'Tlemcen', technology: '5G', status: 'Pending', region: 'West', date: '2024-02-07' },
        { id: 'ANF-2024-0008', location: 'Sétif', technology: '4G', status: 'Favorable', region: 'East', date: '2024-02-10' },
        { id: 'ANF-2024-0009', location: 'Tamanrasset', technology: '4G', status: 'Unfavorable', region: 'South', date: '2024-02-15' },
        { id: 'ANF-2024-0010', location: 'Mostaganem', technology: '5G', status: 'Favorable', region: 'West', date: '2024-02-22' }
      ],
      'Mar': [
        { id: 'ANF-2024-0011', location: 'Tizi Ouzou', technology: '4G', status: 'Favorable', region: 'North', date: '2024-03-02' },
        { id: 'ANF-2024-0012', location: 'Sidi Bel Abbès', technology: '5G', status: 'Favorable', region: 'West', date: '2024-03-08' },
        { id: 'ANF-2024-0013', location: 'Batna', technology: '4G', status: 'Pending', region: 'East', date: '2024-03-12' },
        { id: 'ANF-2024-0014', location: 'Béchar', technology: '5G', status: 'Unfavorable', region: 'South', date: '2024-03-18' },
        { id: 'ANF-2024-0015', location: 'Guelma', technology: '4G', status: 'Favorable', region: 'East', date: '2024-03-25' }
      ],
      'Apr': [
        { id: 'ANF-2024-0016', location: 'Boumerdès', technology: '5G', status: 'Favorable', region: 'North', date: '2024-04-05' },
        { id: 'ANF-2024-0017', location: 'Mascara', technology: '4G', status: 'Pending', region: 'West', date: '2024-04-10' },
        { id: 'ANF-2024-0018', location: 'Béjaïa', technology: '5G', status: 'Favorable', region: 'East', date: '2024-04-15' },
        { id: 'ANF-2024-0019', location: 'Illizi', technology: '4G', status: 'Unfavorable', region: 'South', date: '2024-04-20' },
        { id: 'ANF-2024-0020', location: 'Oran', technology: '5G', status: 'Favorable', region: 'West', date: '2024-04-25' }
      ],
      'May': [
        { id: 'ANF-2024-0021', location: 'Tipaza', technology: '4G', status: 'Favorable', region: 'North', date: '2024-05-03' },
        { id: 'ANF-2024-0022', location: 'Tlemcen', technology: '5G', status: 'Favorable', region: 'West', date: '2024-05-08' },
        { id: 'ANF-2024-0023', location: 'Constantine', technology: '4G', status: 'Pending', region: 'East', date: '2024-05-13' },
        { id: 'ANF-2024-0024', location: 'Tindouf', technology: '5G', status: 'Unfavorable', region: 'South', date: '2024-05-18' },
        { id: 'ANF-2024-0025', location: 'Annaba', technology: '4G', status: 'Favorable', region: 'East', date: '2024-05-23' }
      ],
      'Jun': [
        { id: 'ANF-2024-0026', location: 'Algiers', technology: '5G', status: 'Favorable', region: 'North', date: '2024-06-02' },
        { id: 'ANF-2024-0027', location: 'Oran', technology: '4G', status: 'Pending', region: 'West', date: '2024-06-07' },
        { id: 'ANF-2024-0028', location: 'Sétif', technology: '5G', status: 'Favorable', region: 'East', date: '2024-06-12' },
        { id: 'ANF-2024-0029', location: 'Adrar', technology: '4G', status: 'Unfavorable', region: 'South', date: '2024-06-17' },
        { id: 'ANF-2024-0030', location: 'Blida', technology: '5G', status: 'Favorable', region: 'North', date: '2024-06-22' }
      ]
    }
  }
};
// ... (rest of the code remains the same)
const mockInsights = [
  { 
    id: 1, 
    text: "Approval rates have increased by 5.2% over the last quarter, with the North region showing the highest improvement.", 
    confidence: 0.92,
    category: "trend",
    timestamp: new Date().toISOString(),
    feedbackGiven: false
  },
  { 
    id: 2, 
    text: "The South region has a 25% higher pending rate than other regions, suggesting potential process delays.", 
    confidence: 0.85,
    category: "bottleneck",
    timestamp: new Date().toISOString(),
    feedbackGiven: false
  },
  { 
    id: 3, 
    text: "5G site approvals are processing 15% faster than 4G sites, indicating potential for technology-specific optimization.", 
    confidence: 0.78,
    category: "opportunity",
    timestamp: new Date().toISOString(),
    feedbackGiven: false
  },
  { 
    id: 4, 
    text: "There may be a correlation between site density and approval rates in urban areas, but more data is needed to confirm this pattern.", 
    confidence: 0.62,
    category: "correlation",
    timestamp: new Date().toISOString(),
    feedbackGiven: false
  }
];

const Dashboard = () => {
  const [activeSection, setActiveSection] = useState('overview');
  const [dateRange, setDateRange] = useState('Jan 2024 - Jun 2024');
  const [showFilters, setShowFilters] = useState(false);
  const [selectedRegion, setSelectedRegion] = useState('All Regions');
  const [selectedTechnology, setSelectedTechnology] = useState('All Technologies');
  const [showAIAssistant, setShowAIAssistant] = useState(false);
  const [insights, setInsights] = useState(mockInsights);
  const [isGeneratingInsight, setIsGeneratingInsight] = useState(false);
  const [aiMessage, setAiMessage] = useState('');
  const [aiConversation, setAiConversation] = useState([
    { role: 'assistant', content: 'Bonjour ! Je suis votre assistant d\'analyse de données ANF. Comment puis-je vous aider aujourd\'hui ?' }
  ]);
  const [userInput, setUserInput] = useState('');

  // New state for detail panel
  const [showDetailPanel, setShowDetailPanel] = useState(false);
  const [detailPanelData, setDetailPanelData] = useState([]);
  const [detailPanelTitle, setDetailPanelTitle] = useState('');
  const [detailPanelDescription, setDetailPanelDescription] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'ascending' });
  const [isFullScreen, setIsFullScreen] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  // Simulate data loading
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  }, []);

  useEffect(() => {
    setCurrentPage(1);
  }, [detailPanelData, searchQuery]);

  const handleChartElementClick = (dataType, dataKey) => {
    let data = [];
    let title = '';
    let description = '';

    switch(dataType) {
      case 'region':
        data = mockData.detailedData.regions[dataKey] || [];
        title = `Région ${dataKey}`;
        description = `Détails des sites ANF dans la région ${dataKey}`;
        break;
      case 'status':
        data = mockData.detailedData.approvalStatus[dataKey] || [];
        title = `Statut: ${dataKey}`;
        description = `Sites ANF avec le statut ${dataKey}`;
        break;
      case 'technology':
        data = mockData.detailedData.technologies[dataKey] || [];
        title = `Technologie: ${dataKey}`;
        description = `Sites ANF utilisant la technologie ${dataKey}`;
        break;
      case 'month':
        data = mockData.detailedData.monthlyData[dataKey] || [];
        title = `Mois: ${dataKey}`;
        description = `Sites ANF déposés en ${dataKey} 2024`;
        break;
      default:
        data = [];
        title = 'Détails';
        description = 'Informations détaillées';
    }

    setDetailPanelData(data);
    setDetailPanelTitle(title);
    setDetailPanelDescription(description);
    setShowDetailPanel(true);
    setSearchQuery('');
    setSortConfig({ key: null, direction: 'ascending' });
  };

  const closeDetailPanel = () => {
    setShowDetailPanel(false);
    setTimeout(() => {
      setDetailPanelData([]);
      setDetailPanelTitle('');
      setDetailPanelDescription('');
    }, 300);
  };

  const toggleFullScreen = () => {
    setIsFullScreen(!isFullScreen);
  };

  const requestSort = (key) => {
    let direction = 'ascending';
    if (sortConfig.key === key && sortConfig.direction === 'ascending') {
      direction = 'descending';
    }
    setSortConfig({ key, direction });
  };

  const generateNewInsight = useCallback(async () => {
    setIsGeneratingInsight(true);
    try {
      const prompt = `Analyze ANF site data with the following parameters:
        - Region: ${selectedRegion}
        - Technology: ${selectedTechnology}
        - Date Range: ${dateRange}
        - Current approval rate: ${mockData.approvalRate}%
        - Current pending rate: ${mockData.pendingRate}%
        - Current unfavorable rate: ${mockData.unfavorableRate}%
        
        Generate one actionable insight about telecommunications infrastructure deployment based on this data.`;

      await new Promise(resolve => setTimeout(resolve, 1500));

      const newInsightOptions = [
        {
          text: `Dans la région ${selectedRegion === 'All Regions' ? 'Nord' : selectedRegion}, les sites utilisant la technologie ${selectedTechnology === 'All Technologies' ? '5G' : selectedTechnology} montrent un taux d'approbation 12% plus élevé que la moyenne. Considérez prioriser ces déploiements pour des résultats plus rapides.`,
          confidence: 0.88,
          category: "recommendation"
        },
        {
          text: `Les délais d'approbation ont augmenté de 15% dans les zones rurales par rapport au trimestre précédent. Une révision des processus de validation pourrait être nécessaire pour ces régions.`,
          confidence: 0.72,
          category: "alert"
        },
        {
          text: `Il semble y avoir une corrélation entre la densité de population et les taux d'approbation, mais les données actuelles sont insuffisantes pour établir une causalité définitive.`,
          confidence: 0.65,
          category: "correlation"
        }
      ];

      const randomInsight = newInsightOptions[Math.floor(Math.random() * newInsightOptions.length)];

      const newInsight = {
        id: insights.length + 1,
        text: randomInsight.text,
        confidence: randomInsight.confidence,
        category: randomInsight.category,
        timestamp: new Date().toISOString(),
        feedbackGiven: false
      };

      setInsights(prevInsights => [newInsight, ...prevInsights]);
    } catch (error) {
      console.error('Error generating insight:', error);
    } finally {
      setIsGeneratingInsight(false);
    }
  }, [selectedRegion, selectedTechnology, dateRange, insights]);

  const provideInsightFeedback = (insightId, isPositive) => {
    setInsights(prevInsights => 
      prevInsights.map(insight => 
        insight.id === insightId 
          ? { ...insight, feedbackGiven: true, positiveRating: isPositive } 
          : insight
      )
    );
    console.log(`Feedback for insight ${insightId}: ${isPositive ? 'positive' : 'negative'}`);
  };

  const getConfidenceInfo = (confidenceScore) => {
    if (confidenceScore >= 0.85) {
      return {
        text: "Confiance élevée",
        color: "text-green-600",
        icon: <Zap size={16} className="text-green-600" />
      };
    } else if (confidenceScore >= 0.7) {
      return {
        text: "Confiance moyenne",
        color: "text-amber-600",
        icon: <Lightbulb size={16} className="text-amber-600" />
      };
    } else {
      return {
        text: "Confiance limitée",
        color: "text-gray-500",
        icon: <AlertTriangle size={16} className="text-gray-500" />
      };
    }
  };

  const getCategoryIcon = (category) => {
    switch(category) {
      case 'trend':
        return <TrendingUpIcon size={16} />;
      case 'bottleneck':
        return <AlertTriangle size={16} />;
      case 'opportunity':
        return <Lightbulb size={16} />;
      case 'correlation':
        return <BarChart2 size={16} />;
      case 'recommendation':
        return <Zap size={16} />;
      case 'alert':
        return <AlertTriangle size={16} />;
      default:
        return <Info size={16} />;
    }
  };

  const handleSendMessage = async () => {
    if (!userInput.trim()) return;

    const newMessage = { role: 'user', content: userInput };
    setAiConversation(prev => [...prev, newMessage]);
    setUserInput('');
    setAiMessage('...');

    try {
      await new Promise(resolve => setTimeout(resolve, 1000));
      let assistantResponse = '';
      const userQuestion = userInput.toLowerCase();

      if (userQuestion.includes('région') || userQuestion.includes('region')) {
        assistantResponse = "D'après les données actuelles, la région Nord présente le plus grand nombre de sites ANF (423), suivie par l'Est (356), le Sud (289) et l'Ouest (180). La région Nord a également le taux d'approbation le plus élevé à 71%.";
      } else if (userQuestion.includes('technologie') || userQuestion.includes('5g') || userQuestion.includes('4g')) {
        assistantResponse = "La technologie 4G représente 70,2% des sites ANF (876 sites), tandis que la 5G représente 29,8% (372 sites). Les sites 5G ont un taux d'approbation moyen 8% plus élevé que les sites 4G.";
      } else if (userQuestion.includes('tendance') || userQuestion.includes('trend') || userQuestion.includes('évolution')) {
        assistantResponse = "Les approbations de sites ANF montrent une tendance à la hausse, avec une augmentation de 54,8% de janvier à juin 2024. Le taux d'approbation global est passé de 58% en janvier à 68% en juin.";
      } else if (userQuestion.includes('recommandation') || userQuestion.includes('suggestion')) {
        assistantResponse = "Basé sur les données actuelles, je recommande de:\n\n1. Accélérer le traitement des demandes en attente dans la région Sud, où le taux d'attente est 25% plus élevé que la moyenne\n\n2. Prioriser les déploiements 5G dans les zones urbaines où ils montrent un taux d'approbation supérieur\n\n3. Mettre en place un suivi spécifique pour les sites en attente depuis plus de 45 jours";
      } else {
        assistantResponse = "Je peux vous aider à analyser les données ANF de plusieurs façons. Vous pouvez me demander des informations sur les régions, les technologies, les tendances temporelles, ou des recommandations basées sur les données actuelles. Que souhaitez-vous explorer?";
      }

      setAiMessage('');
      setAiConversation(prev => [...prev, { role: 'assistant', content: assistantResponse }]);
    } catch (error) {
      console.error('Error sending message:', error);
      setAiMessage('');
      setAiConversation(prev => [...prev, { 
        role: 'assistant', 
        content: "Désolé, j'ai rencontré une erreur en traitant votre demande. Veuillez réessayer." 
      }]);
    }
  };

  const filteredData = useMemo(() => {
    if (!searchQuery.trim()) return detailPanelData;

    const lowerCaseQuery = searchQuery.toLowerCase();
    return detailPanelData.filter(item => {
      return Object.entries(item).some(([key, value]) => {
        if (typeof value === 'string') {
          return value.toLowerCase().includes(lowerCaseQuery);
        } else if (typeof value === 'number') {
          return value.toString().includes(lowerCaseQuery);
        }
        return false;
      });
    });
  }, [detailPanelData, searchQuery]);

  const sortedData = useMemo(() => {
    if (!sortConfig.key) return filteredData;
    return [...filteredData].sort((a, b) => {
      if (a[sortConfig.key] === undefined || b[sortConfig.key] === undefined) {
        return 0;
      }
      let comparison = 0;
      if (typeof a[sortConfig.key] === 'string') {
        comparison = a[sortConfig.key].localeCompare(b[sortConfig.key]);
      } else {
        comparison = a[sortConfig.key] - b[sortConfig.key];
      }
      return sortConfig.direction === 'ascending' ? comparison : -comparison;
    });
  }, [filteredData, sortConfig]);

  const paginatedData = useMemo(() => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    return sortedData.slice(startIndex, startIndex + itemsPerPage);
  }, [sortedData, currentPage, itemsPerPage]);

  const totalPages = Math.ceil(sortedData.length / itemsPerPage);

  const getStatusIcon = (status) => {
    switch(status) {
      case 'Favorable':
        return <div className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center"><Check size={14} className="text-white" /></div>;
      case 'Unfavorable':
        return <div className="w-6 h-6 rounded-full bg-red-500 flex items-center justify-center"><X size={14} className="text-white" /></div>;
      case 'Pending':
        return <div className="w-6 h-6 rounded-full bg-amber-500 flex items-center justify-center"><Clock size={14} className="text-white" /></div>;
      default:
        return null;
    }
  };

  const getTableHeaders = () => {
    if (detailPanelData.length === 0) return [];
    const allKeys = new Set();
    detailPanelData.forEach(item => {
      Object.keys(item).forEach(key => allKeys.add(key));
    });
    const priorityFields = ['id', 'location', 'region', 'technology', 'status', 'date'];
    return Array.from(allKeys)
      .sort((a, b) => {
        const indexA = priorityFields.indexOf(a);
        const indexB = priorityFields.indexOf(b);
        if (indexA !== -1 && indexB !== -1) {
          return indexA - indexB;
        } else if (indexA !== -1) {
          return -1;
        } else if (indexB !== -1) {
          return 1;
        } else {
          return a.localeCompare(b);
        }
      })
      .filter(key => key !== '_id');
  };

  const formatHeaderText = (header) => {
    return header
      .replace(/([A-Z])/g, ' $1')
      .replace(/_/g, ' ')
      .replace(/^./, str => str.toUpperCase())
      .trim();
  };

  const formatCellValue = (key, value) => {
    if (value === null || value === undefined) return '-';
    if (key === 'date' || key.includes('Date')) {
      return new Date(value).toLocaleDateString('fr-FR');
    } else if (typeof value === 'boolean') {
      return value ? 'Oui' : 'Non';
    } else if (key === 'status') {
      return (
        <span className={
          value === 'Favorable' ? 'text-green-600' : 
          value === 'Unfavorable' ? 'text-red-600' : 
          'text-amber-600'
        }>
          {value}
        </span>
      );
    }
    return value.toString();
  };

  return (
    <div className="flex h-screen bg-gray-50 font-sans">
      {/* Left Sidebar Navigation */}
      <div className="w-16 md:w-64 bg-[#1A365D] text-white flex flex-col">
        <div className="p-4 border-b border-blue-800 flex items-center justify-center md:justify-start">
          <h1 className="hidden md:block text-xl font-bold">ANF Analytics</h1>
        </div>
        <nav className="flex-1 pt-6">
          <NavItem 
            icon={<Home size={20} />} 
            label="Vue d'ensemble" 
            active={activeSection === 'overview'} 
            onClick={() => setActiveSection('overview')} 
          />
          <NavItem 
            icon={<BarChart size={20} />} 
            label="Analyse détaillée" 
            active={activeSection === 'analysis'} 
            onClick={() => setActiveSection('analysis')} 
          />
          <NavItem 
            icon={<Calendar size={20} />} 
            label="Timeline" 
            active={activeSection === 'timeline'} 
            onClick={() => setActiveSection('timeline')} 
          />
          <NavItem 
            icon={<MapPin size={20} />} 
            label="Géographie" 
            active={activeSection === 'geography'} 
            onClick={() => setActiveSection('geography')} 
          />
          <NavItem 
            icon={<Settings size={20} />} 
            label="Paramètres" 
            active={activeSection === 'settings'} 
            onClick={() => setActiveSection('settings')} 
          />
        </nav>
        <div className="p-4 border-t border-blue-800 mt-auto">
          <div className="hidden md:block text-sm text-blue-300">
            <p>Dernière mise à jour:</p>
            <p className="font-medium">20 Juin 2024</p>
          </div>
        </div>
      </div>
      {/* Main Content Area */}
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* Top Bar */}
        <header className="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
          <div>
            <h1 className="text-xl font-bold text-[#1A365D]">Tableau de Bord ANF</h1>
            <p className="text-sm text-gray-500">Analyse de l'Infrastructure de Télécommunications</p>
          </div>
          <div className="flex items-center space-x-4">
            {/* AI Assistant Button */}
            <button 
              className={`flex items-center space-x-2 ${showAIAssistant ? 'bg-[#1A365D]' : 'bg-[#2C7A7B]'} text-white px-3 py-2 rounded-md hover:bg-opacity-90 transition`}
              onClick={() => setShowAIAssistant(!showAIAssistant)}
            >
              <MessageSquare size={16} />
              <span className="hidden md:inline">Assistant IA</span>
            </button>
            {/* Date Range Selector */}
            <div className="relative">
              <img 
                src="https://assets.sitebrew.ai/generated-1747563045030.webp" 
                alt="Date Range Selector" 
                className="h-10 cursor-pointer"
                onClick={() => alert('Sélecteur de plage de dates cliqué')}
              />
            </div>
            {/* Filter Button */}
            <button 
              className="flex items-center space-x-2 bg-[#2C7A7B] text-white px-3 py-2 rounded-md hover:bg-teal-700 transition"
              onClick={() => setShowFilters(!showFilters)}
            >
              <Filter size={16} />
              <span className="hidden md:inline">Filtres</span>
            </button>
            {/* Export Button */}
            <button className="flex items-center space-x-2 bg-gray-100 text-gray-700 px-3 py-2 rounded-md hover:bg-gray-200 transition">
              <Download size={16} />
              <span className="hidden md:inline">Exporter</span>
            </button>
          </div>
        </header>
        {/* Main Content */}
        <main className="flex-1 overflow-y-auto p-6">
          {loading ? (
            <div className="flex items-center justify-center h-full">
              <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[#2C7A7B]"></div>
            </div>
          ) : (
            <>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <KpiCard 
                  title="Total Sites ANF" 
                  value={mockData.totalSites} 
                  change={+5.2} 
                  icon={<MapPin className="text-[#2C7A7B]" />} 
                />
                <KpiCard 
                  title="Statut Favorable" 
                  value={`${mockData.approvalRate}%`} 
                  change={+2.1} 
                  icon={<Check className="text-[#2C7A7B]" />} 
                  onClick={() => handleChartElementClick('status', 'Favorable')}
                />
                <KpiCard 
                  title="Approbations en Attente" 
                  value={`${mockData.pendingRate}%`} 
                  change={-1.5} 
                  icon={<Clock className="text-[#2C7A7B]" />} 
                  onClick={() => handleChartElementClick('status', 'Pending')}
                />
                <KpiCard 
                  title="Statut Défavorable" 
                  value={`${mockData.unfavorableRate}%`} 
                  change={-0.8} 
                  icon={<X className="text-[#2C7A7B]" />} 
                  onClick={() => handleChartElementClick('status', 'Unfavorable')}
                />
              </div>
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                {/* Map Section */}
                <div className="bg-white p-6 rounded-lg shadow-sm lg:col-span-1">
                  <div className="flex justify-between items-center mb-4">
                    <h2 className="text-lg font-semibold text-[#1A365D]">Distribution Régionale</h2>
                    <button className="text-sm text-[#2C7A7B] hover:underline">Voir Détails</button>
                  </div>
                  <div className="aspect-square relative">
                    <div className="absolute inset-0 flex items-center justify-center bg-gray-100 rounded-md">
                      <div className="text-center">
                        <MapPin size={48} className="mx-auto text-[#2C7A7B] mb-2" />
                        <p className="text-sm text-gray-500">Carte interactive de l'Algérie montrant la distribution des sites ANF</p>
                      </div>
                    </div>
                  </div>
                  <div className="mt-4 space-y-2">
                    {mockData.regions.map(region => (
                      <div 
                        key={region.id} 
                        className="flex items-center justify-between text-sm cursor-pointer hover:bg-gray-50 p-1 rounded transition-colors"
                        onClick={() => handleChartElementClick('region', region.name)}
                      >
                        <span className="text-gray-700">Région {region.name}</span>
                        <div className="flex items-center">
                          <span className="font-medium text-[#1A365D]">{region.sites} sites</span>
                          <div className="ml-2 w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
                            <div 
                              className="h-full bg-[#2C7A7B]" 
                              style={{ width: `${(region.sites / mockData.totalSites) * 100}%` }}
                            ></div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                {/* Charts Section */}
                <div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
                  {/* Status Distribution Chart */}
                  <div className="bg-white p-6 rounded-lg shadow-sm">
                    <h2 className="text-lg font-semibold text-[#1A365D] mb-4">Statut d'Approbation</h2>
                    <div 
                      className="flex items-center justify-center h-48 cursor-pointer"
                      onClick={() => handleChartElementClick('status', 'Favorable')}
                    >
                      <img 
                        src="https://assets.sitebrew.ai/generated-1747563043569.webp" 
                        alt="Status Distribution Donut Chart" 
                        className="h-full"
                      />
                    </div>
                    <div className="mt-4 grid grid-cols-3 gap-2">
                      <div 
                        className="flex items-center cursor-pointer hover:bg-gray-50 p-1 rounded transition-colors"
                        onClick={() => handleChartElementClick('status', 'Favorable')}
                      >
                        <div className="w-3 h-3 rounded-full bg-[#38A169] mr-2"></div>
                        <span className="text-xs">Favorable</span>
                      </div>
                      <div 
                        className="flex items-center cursor-pointer hover:bg-gray-50 p-1 rounded transition-colors"
                        onClick={() => handleChartElementClick('status', 'Pending')}
                      >
                        <div className="w-3 h-3 rounded-full bg-[#DD6B20] mr-2"></div>
                        <span className="text-xs">En Attente</span>
                      </div>
                      <div 
                        className="flex items-center cursor-pointer hover:bg-gray-50 p-1 rounded transition-colors"
                        onClick={() => handleChartElementClick('status', 'Unfavorable')}
                      >
                        <div className="w-3 h-3 rounded-full bg-[#E53E3E] mr-2"></div>
                        <span className="text-xs">Défavorable</span>
                      </div>
                    </div>
                  </div>
                  {/* Technology Distribution Chart */}
                  <div className="bg-white p-6 rounded-lg shadow-sm">
                    <h2 className="text-lg font-semibold text-[#1A365D] mb-4">Distribution des Technologies</h2>
                    <div className="h-48 flex items-center justify-center">
                      <div className="w-full">
                        {mockData.technologies.map(tech => (
                          <div 
                            key={tech.name} 
                            className="mb-4 cursor-pointer hover:bg-gray-50 p-1 rounded transition-colors"
                            onClick={() => handleChartElementClick('technology', tech.name)}
                          >
                            <div className="flex justify-between mb-1">
                              <span className="text-sm font-medium text-gray-700">{tech.name}</span>
                              <span className="text-sm text-gray-500">{tech.count} sites</span>
                            </div>
                            <div className="w-full h-2 bg-gray-200 rounded-full">
                              <div 
                                className={`h-full rounded-full ${tech.name === '5G' ? 'bg-[#2C7A7B]' : 'bg-blue-400'}`}
                                style={{ width: `${(tech.count / mockData.totalSites) * 100}%` }}
                              ></div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                    <div className="mt-4">
                      <p className="text-sm text-gray-500">
                        <span className="font-medium text-[#2C7A7B]">70,2%</span> des sites utilisent la technologie 4G, tandis que 
                        <span className="font-medium text-[#2C7A7B]"> 29,8%</span> utilisent la 5G.
                      </p>
                    </div>
                  </div>
                  {/* Monthly Trends Chart */}
                  <div className="bg-white p-6 rounded-lg shadow-sm md:col-span-2">
                    <h2 className="text-lg font-semibold text-[#1A365D] mb-4">Tendances Mensuelles d'Approbation</h2>
                    <div className="h-64">
                      <div className="h-full flex items-end">
                        {mockData.monthlyTrends.map((data, index) => (
                          <div 
                            key={index} 
                            className="flex-1 flex flex-col items-center cursor-pointer hover:bg-gray-50 transition-colors"
                            onClick={() => handleChartElementClick('month', data.month)}
                          >
                            <div className="w-full flex justify-center space-x-1">
                              <div 
                                className="w-3 bg-[#38A169]" 
                                style={{ height: `${data.approved * 2}px` }}
                              ></div>
                              <div 
                                className="w-3 bg-[#DD6B20]" 
                                style={{ height: `${data.pending * 2}px` }}
                              ></div>
                              <div 
                                className="w-3 bg-[#E53E3E]" 
                                style={{ height: `${data.rejected * 2}px` }}
                              ></div>
                            </div>
                            <div className="mt-2 text-xs text-gray-500">{data.month}</div>
                          </div>
                        ))}
                      </div>
                    </div>
                    <div className="mt-4 flex justify-center space-x-6">
                      <div className="flex items-center">
                        <div className="w-3 h-3 rounded-full bg-[#38A169] mr-2"></div>
                        <span className="text-xs">Favorable</span>
                      </div>
                      <div className="flex items-center">
                        <div className="w-3 h-3 rounded-full bg-[#DD6B20] mr-2"></div>
                        <span className="text-xs">En Attente</span>
                      </div>
                      <div className="flex items-center">
                        <div className="w-3 h-3 rounded-full bg-[#E53E3E] mr-2"></div>
                        <span className="text-xs">Défavorable</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              {/* AI Insights Panel - Enhanced Version */}
              <div className="mb-8 bg-white rounded-lg shadow-sm overflow-hidden border border-[#2C7A7B]">
                <div className="bg-[#1A365D] text-white p-4 flex items-center justify-between">
                  <div className="flex items-center">
                    <Lightbulb size={20} className="mr-2" />
                    <h2 className="text-lg font-semibold">Insights IA</h2>
                  </div>
                  <div className="flex items-center space-x-2">
                    <button 
                      className={`p-2 rounded-md ${isGeneratingInsight ? 'bg-blue-700 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'} transition`}
                      onClick={generateNewInsight}
                      disabled={isGeneratingInsight}
                    >
                      <RefreshCw size={16} className={`${isGeneratingInsight ? 'animate-spin' : ''}`} />
                    </button>
                  </div>
                </div>
                <div className="p-4 max-h-80 overflow-y-auto">
                  {insights.length === 0 ? (
                    <div className="text-center py-8 text-gray-500">
                      <AlertTriangle size={24} className="mx-auto mb-2" />
                      <p>Aucun insight disponible. Cliquez sur le bouton de rafraîchissement pour générer des insights.</p>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {insights.map(insight => {
                        const confidenceInfo = getConfidenceInfo(insight.confidence);
                        return (
                          <div key={insight.id} className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                            <div className="flex items-start">
                              <div className="mr-3 mt-1 p-2 rounded-full bg-[#2C7A7B] bg-opacity-10">
                                {getCategoryIcon(insight.category)}
                              </div>
                              <div className="flex-1">
                                <p className="text-gray-800 mb-2">{insight.text}</p>
                                <div className="flex items-center justify-between">
                                  <div className="flex items-center text-xs">
                                    {confidenceInfo.icon}
                                    <span className={`ml-1 ${confidenceInfo.color}`}>
                                      {confidenceInfo.text}
                                    </span>
                                  </div>
                                  {!insight.feedbackGiven ? (
                                    <div className="flex items-center space-x-2">
                                      <button 
                                        className="p-1 text-gray-500 hover:text-green-600 transition"
                                        onClick={() => provideInsightFeedback(insight.id, true)}
                                        title="Utile"
                                      >
                                        <ThumbsUp size={14} />
                                      </button>
                                      <button 
                                        className="p-1 text-gray-500 hover:text-red-600 transition"
                                        onClick={() => provideInsightFeedback(insight.id, false)}
                                        title="Pas utile"
                                      >
                                        <ThumbsDown size={14} />
                                      </button>
                                    </div>
                                  ) : (
                                    <div className="text-xs text-gray-500">
                                      Merci pour votre feedback
                                    </div>
                                  )}
                                </div>
                              </div>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              </div>
              {/* Bottom Section - Data Table */}
              <div className="bg-white rounded-lg shadow-sm overflow-hidden">
                <div className="p-6 border-b border-gray-200">
                  <div className="flex justify-between items-center">
                    <h2 className="text-lg font-semibold text-[#1A365D]">Demandes de Sites ANF Récentes</h2>
                    <button className="text-sm text-[#2C7A7B] hover:underline">Voir Tout</button>
                  </div>
                </div>
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID Site</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Emplacement</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Technologie</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {mockData.recentSites.map((site, index) => (
                        <tr 
                          key={site.id} 
                          className={`${index % 2 === 0 ? 'bg-white' : 'bg-gray-50'} hover:bg-gray-100 cursor-pointer transition-colors`}
                          onClick={() => {
                            const dataType = site.status === 'Favorable' ? 'status' : 
                                            site.status === 'Unfavorable' ? 'status' : 
                                            site.status === 'Pending' ? 'status' : 'technology';
                            const dataKey = site.status === 'Favorable' ? 'Favorable' : 
                                          site.status === 'Unfavorable' ? 'Unfavorable' : 
                                          site.status === 'Pending' ? 'Pending' : site.technology;
                            handleChartElementClick(dataType, dataKey);
                          }}
                        >
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-[#1A365D]">{site.id}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{site.location}</td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{site.technology}</td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="flex items-center">
                              {getStatusIcon(site.status)}
                              <span className={`ml-2 text-sm ${
                                site.status === 'Favorable' ? 'text-green-600' : 
                                site.status === 'Unfavorable' ? 'text-red-600' : 
                                'text-amber-600'
                              }`}>
                                {site.status}
                              </span>
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{site.date}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                <div className="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
                  <div className="text-sm text-gray-500">
                    Affichage de <span className="font-medium">5</span> sur <span className="font-medium">42</span> entrées
                  </div>
                  <div className="flex space-x-2">
                    <button className="px-3 py-1 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50">Précédent</button>
                    <button className="px-3 py-1 bg-[#2C7A7B] text-white rounded-md text-sm hover:bg-teal-700">Suivant</button>
                  </div>
                </div>
              </div>
            </>
          )}
        </main>
      </div>
      {/* Filter Panel */}
      {showFilters && (
        <div className="fixed inset-0 bg-black bg-opacity-30 z-40 flex justify-end">
          <div className="w-80 bg-white h-full shadow-lg p-6 overflow-y-auto">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-lg font-semibold text-[#1A365D]">Filtrer les Données</h2>
              <button 
                className="text-gray-500 hover:text-gray-700"
                onClick={() => setShowFilters(false)}
              >
                <X size={20} />
              </button>
            </div>
            <div className="space-y-6">
              {/* Region Filter */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Région</label>
                <div className="relative">
                  <img 
                    src="https://assets.sitebrew.ai/generated-1747563043470.webp" 
                    alt="Region Filter" 
                    className="w-full cursor-pointer"
                    onClick={() => alert('Filtre de région cliqué')}
                  />
                </div>
              </div>
              {/* Technology Filter */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Technologie</label>
                <div className="relative">
                  <select 
                    className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-[#2C7A7B] focus:border-[#2C7A7B] sm:text-sm rounded-md"
                    value={selectedTechnology}
                    onChange={(e) => setSelectedTechnology(e.target.value)}
                  >
                    <option>Toutes Technologies</option>
                    <option>4G</option>
                    <option>5G</option>
                  </select>
                </div>
              </div>
              {/* Status Filter */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Statut</label>
                <div className="space-y-2">
                  <div className="flex items-center">
                    <input type="checkbox" id="status-favorable" className="h-4 w-4 text-[#2C7A7B] focus:ring-[#2C7A7B] border-gray-300 rounded" defaultChecked />
                    <label htmlFor="status-favorable" className="ml-2 block text-sm text-gray-700">
                      Favorable
                    </label>
                  </div>
                  <div className="flex items-center">
                    <input type="checkbox" id="status-unfavorable" className="h-4 w-4 text-[#2C7A7B] focus:ring-[#2C7A7B] border-gray-300 rounded" defaultChecked />
                    <label htmlFor="status-unfavorable" className="ml-2 block text-sm text-gray-700">
                      Défavorable
                    </label>
                  </div>
                  <div className="flex items-center">
                    <input type="checkbox" id="status-pending" className="h-4 w-4 text-[#2C7A7B] focus:ring-[#2C7A7B] border-gray-300 rounded" defaultChecked />
                    <label htmlFor="status-pending" className="ml-2 block text-sm text-gray-700">
                      En Attente
                    </label>
                  </div>
                </div>
              </div>
              {/* Date Range Filter */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Plage de Dates</label>
                <div className="relative">
                  <img 
                    src="https://assets.sitebrew.ai/generated-1747563045030.webp" 
                    alt="Date Range Selector" 
                    className="w-full cursor-pointer"
                    onClick={() => alert('Sélecteur de plage de dates cliqué')}
                  />
                </div>
              </div>
              <div className="pt-4 border-t border-gray-200 flex space-x-3">
                <button 
                  className="flex-1 bg-gray-100 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-200 transition"
                  onClick={() => {
                    setSelectedRegion('All Regions');
                    setSelectedTechnology('All Technologies');
                  }}
                >
                  Réinitialiser
                </button>
                <button 
                  className="flex-1 bg-[#2C7A7B] text-white py-2 px-4 rounded-md hover:bg-teal-700 transition"
                  onClick={() => setShowFilters(false)}
                >
                  Appliquer
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      {/* AI Assistant Chat Panel */}
      {showAIAssistant && (
        <div className="fixed bottom-4 right-4 w-96 h-[500px] bg-white rounded-lg shadow-xl z-50 flex flex-col overflow-hidden border border-[#2C7A7B]">
          <div className="bg-[#1A365D] text-white p-4 flex items-center justify-between">
            <div className="flex items-center">
              <MessageSquare size={18} className="mr-2" />
              <h3 className="font-medium">Assistant Analytique ANF</h3>
            </div>
            <button 
              className="text-white hover:text-gray-200"
              onClick={() => setShowAIAssistant(false)}
            >
              <X size={18} />
            </button>
          </div>
          <div className="flex-1 p-4 overflow-y-auto bg-gray-50">
            {aiConversation.map((message, index) => (
              <div 
                key={index} 
                className={`mb-4 ${message.role === 'assistant' ? 'flex' : 'flex justify-end'}`}
              >
                <div 
                  className={`max-w-[80%] p-3 rounded-lg ${
                    message.role === 'assistant' 
                      ? 'bg-white border border-gray-200' 
                      : 'bg-[#2C7A7B] text-white'
                  }`}
                >
                  <p className="text-sm whitespace-pre-line">{message.content}</p>
                </div>
              </div>
            ))}
            {aiMessage && (
              <div className="mb-4 flex">
                <div className="max-w-[80%] p-3 rounded-lg bg-white border border-gray-200">
                  <div className="flex space-x-1">
                    <div className="h-2 w-2 bg-gray-300 rounded-full animate-bounce"></div>
                    <div className="h-2 w-2 bg-gray-300 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                    <div className="h-2 w-2 bg-gray-300 rounded-full animate-bounce" style={{ animationDelay: '0.4s' }}></div>
                  </div>
                </div>
              </div>
            )}
          </div>
          <div className="p-4 border-t border-gray-200 bg-white">
            <div className="flex items-center">
              <input 
                type="text" 
                className="flex-1 border border-gray-300 rounded-l-md py-2 px-3 focus:outline-none focus:ring-1 focus:ring-[#2C7A7B] focus:border-[#2C7A7B]"
                placeholder="Posez une question sur les données ANF..."
                value={userInput}
                onChange={(e) => setUserInput(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
              />
              <button 
                className="bg-[#2C7A7B] text-white py-2 px-3 rounded-r-md hover:bg-teal-700 transition"
                onClick={handleSendMessage}
              >
                <MessageSquare size={18} />
              </button>
            </div>
            <div className="mt-2 text-xs text-gray-500">
              <p>Exemples: "Quelle région a le plus de sites?", "Tendances des approbations", "Recommandations"</p>
            </div>
          </div>
        </div>
      )}
      {/* Detail Panel - Sliding from right */}
      {showDetailPanel && (
        <div 
          className={`fixed inset-0 bg-black bg-opacity-30 z-50 flex ${isFullScreen ? 'justify-center' : 'justify-end'} transition-all duration-300`}
          onClick={(e) => {
            if (e.target === e.currentTarget) {
              closeDetailPanel();
            }
          }}
        >
          <div 
            className={`bg-white shadow-xl flex flex-col overflow-hidden transition-all duration-300 ease-in-out transform ${
              isFullScreen ? 'w-full h-full' : 'w-[90%] md:w-[70%] lg:w-[60%] h-full'
            } ${showDetailPanel ? 'translate-x-0' : 'translate-x-full'}`}
          >
            {/* Panel Header */}
            <div className="bg-[#1A365D] text-white p-4 flex items-center justify-between">
              <div>
                <h2 className="text-lg font-semibold">{detailPanelTitle}</h2>
                <p className="text-sm text-blue-200">{detailPanelDescription}</p>
              </div>
              <div className="flex items-center space-x-2">
                <button 
                  className="p-2 rounded-md hover:bg-blue-800 transition"
                  onClick={toggleFullScreen}
                  title={isFullScreen ? "Réduire" : "Agrandir"}
                >
                  {isFullScreen ? <Minimize2 size={18} /> : <Maximize2 size={18} />}
                </button>
                <button 
                  className="p-2 rounded-md hover:bg-blue-800 transition"
                  onClick={closeDetailPanel}
                  title="Fermer"
                >
                  <X size={18} />
                </button>
              </div>
            </div>
            {/* Search and Controls */}
            <div className="p-4 border-b border-gray-200 bg-gray-50">
              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div className="relative flex-1">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <Search size={16} className="text-gray-400" />
                  </div>
                  <input
                    type="text"
                    className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-[#2C7A7B] focus:border-[#2C7A7B] sm:text-sm"
                    placeholder="Rechercher..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
                <div className="flex items-center space-x-2">
                  <select
                    className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-[#2C7A7B] focus:border-[#2C7A7B] sm:text-sm rounded-md"
                    value={itemsPerPage}
                    onChange={(e) => setItemsPerPage(Number(e.target.value))}
                  >
                    <option value={5}>5 par page</option>
                    <option value={10}>10 par page</option>
                    <option value={20}>20 par page</option>
                    <option value={50}>50 par page</option>
                  </select>
                  <button 
                    className="flex items-center space-x-2 bg-[#2C7A7B] text-white px-3 py-2 rounded-md hover:bg-teal-700 transition"
                    onClick={() => alert('Export clicked')}
                  >
                    <Download size={16} />
                    <span className="hidden md:inline">Exporter</span>
                  </button>
                </div>
              </div>
              <div className="mt-2 text-sm text-gray-500">
                {sortedData.length > 0 ? (
                  <p>
                    Affichage de {Math.min((currentPage - 1) * itemsPerPage + 1, sortedData.length)} à {Math.min(currentPage * itemsPerPage, sortedData.length)} sur {sortedData.length} résultats
                    {searchQuery && ` (filtrés de ${detailPanelData.length} total)`}
                  </p>
                ) : (
                  <p>Aucun résultat trouvé</p>
                )}
              </div>
            </div>
            {/* Table Content */}
            <div className="flex-1 overflow-auto">
              {paginatedData.length > 0 ? (
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50 sticky top-0">
                    <tr>
                      {getTableHeaders().map(header => (
                        <th 
                          key={header}
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
                          onClick={() => requestSort(header)}
                        >
                          <div className="flex items-center">
                            {formatHeaderText(header)}
                            {sortConfig.key === header && (
                              <span className="ml-1">
                                {sortConfig.direction === 'ascending' ? (
                                  <ArrowUp size={14} />
                                ) : (
                                  <ArrowDown size={14} />
                                )}
                              </span>
                            )}
                          </div>
                        </th>
                      ))}
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {paginatedData.map((item, index) => (
                      <tr key={item.id || index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
                        {getTableHeaders().map(header => (
                          <td key={`${item.id || index}-${header}`} className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {formatCellValue(header, item[header])}
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              ) : (
                <div className="flex flex-col items-center justify-center h-64">
                  <XCircle size={48} className="text-gray-300 mb-4" />
                  <p className="text-gray-500">Aucune donnée trouvée</p>
                  {searchQuery && (
                    <button 
                      className="mt-4 text-[#2C7A7B] hover:underline"
                      onClick={() => setSearchQuery('')}
                    >
                      Effacer la recherche
                    </button>
                  )}
                </div>
              )}
            </div>
            {/* Pagination */}
            {sortedData.length > 0 && (
              <div className="p-4 border-t border-gray-200 bg-white">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <button
                      className={`px-3 py-1 rounded-md ${
                        currentPage === 1 
                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed' 
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                      onClick={() => setCurrentPage(1)}
                      disabled={currentPage === 1}
                    >
                      <ChevronLeft size={16} />
                      <ChevronLeft size={16} className="-ml-2" />
                    </button>
                    <button
                      className={`px-3 py-1 rounded-md ${
                        currentPage === 1 
                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed' 
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                      onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
                      disabled={currentPage === 1}
                    >
                      <ChevronLeft size={16} />
                    </button>
                  </div>
                  <div className="hidden md:flex items-center space-x-1">
                    {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                      let pageNum;
                      if (totalPages <= 5) {
                        pageNum = i + 1;
                      } else if (currentPage <= 3) {
                        pageNum = i + 1;
                      } else if (currentPage >= totalPages - 2) {
                        pageNum = totalPages - 4 + i;
                      } else {
                        pageNum = currentPage - 2 + i;
                      }
                      return (
                        <button
                          key={pageNum}
                          className={`px-3 py-1 rounded-md ${
                            currentPage === pageNum
                              ? 'bg-[#2C7A7B] text-white'
                              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                          }`}
                          onClick={() => setCurrentPage(pageNum)}
                        >
                          {pageNum}
                        </button>
                      );
                    })}
                  </div>
                  <div className="md:hidden text-sm text-gray-500">
                    Page {currentPage} sur {totalPages}
                  </div>
                  <div className="flex items-center space-x-2">
                    <button
                      className={`px-3 py-1 rounded-md ${
                        currentPage === totalPages
                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                      onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
                      disabled={currentPage === totalPages}
                    >
                      <ChevronRight size={16} />
                    </button>
                    <button
                      className={`px-3 py-1 rounded-md ${
                        currentPage === totalPages
                          ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                      }`}
                      onClick={() => setCurrentPage(totalPages)}
                      disabled={currentPage === totalPages}
                    >
                      <ChevronRight size={16} />
                      <ChevronRight size={16} className="-ml-2" />
                    </button>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};

const NavItem = ({ icon, label, active, onClick }) => {
  return (
    <button 
      className={`flex items-center w-full px-4 py-3 text-left ${
        active ? 'bg-[#2C7A7B] text-white' : 'text-blue-200 hover:bg-blue-900'
      }`}
      onClick={onClick}
    >
      <div className="flex items-center">
        <div className="mr-3">{icon}</div>
        <span className="hidden md:block">{label}</span>
      </div>
    </button>
  );
};

const KpiCard = ({ title, value, change, icon, onClick }) => {
  const isPositive = change >= 0;
  return (
    <div 
      className={`bg-white p-6 rounded-lg shadow-sm ${onClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''}`}
      onClick={onClick}
    >
      <div className="flex justify-between items-start">
        <div>
          <p className="text-sm text-gray-500">{title}</p>
          <p className="mt-1 text-2xl font-semibold text-[#2C7A7B]">{value}</p>
        </div>
        <div className="p-2 bg-teal-50 rounded-full">
          {icon}
        </div>
      </div>
      <div className="mt-4 flex items-center">
        {isPositive ? (
          <ArrowUpRight size={16} className="text-green-500 mr-1" />
        ) : (
          <ArrowDownRight size={16} className="text-red-500 mr-1" />
        )}
        <span className={`text-sm ${isPositive ? 'text-green-500' : 'text-red-500'}`}>
          {Math.abs(change)}%
        </span>
        <span className="text-sm text-gray-500 ml-1">par rapport au mois dernier</span>
      </div>
    </div>
  );
};

export default Dashboard;