import { useMemo } from 'react';
import { filterItemByPeriod } from '@/components/filter/ItemsFilter';
import ChartCard from '@/components/ChartCard';
import { PeriodType } from '../KPIBar';

interface CAEvolutionChartProps {
  title: string
  items: any[];
  period: PeriodType;
  className?: string;
  type: string;
  showLabels?: boolean;
  yAxisLabel?: string;
}

// Fonction pour grouper les factures par date selon la période
const groupFacturesByPeriod = (items: any[], period: PeriodType) => {
  const grouped: Record<string, number> = {};

  items
    .filter(f => f.statut === 2) // Seulement les factures validées
    .forEach(item => {
      const date = new Date(item.date);
      let key: string;

      switch (period) {
        case 'today':
          // Grouper par heure
          key = `${date.getHours()}h`;
          break;

        case 'week':
          // Grouper par jour de la semaine
          const days = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];
          key = days[date.getDay()];
          break;

        case 'month':
          // Grouper par jour du mois
          key = `${date.getDate()}/${date.getMonth() + 1}`;
          break;

        case 'quarter':
          // Grouper par semaine
          const weekNum = Math.ceil(date.getDate() / 7);
          key = `S${weekNum}`;
          break;

        case 'year':
          // Grouper par mois
          const months = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'];
          key = months[date.getMonth()];
          break;

        case 'all':
          // Grouper par mois/année
          key = `${date.getMonth() + 1}/${date.getFullYear()}`;
          break;

        default:
          key = `${date.getDate()}/${date.getMonth() + 1}`;
      }

      grouped[key] = (grouped[key] || 0) + item.total_ht;
    });

  return grouped;
};

// Fonction pour formater les données pour le graphique
const formatChartData = (grouped: Record<string, number>, period: PeriodType) => {
  const entries = Object.entries(grouped);

  // Trier selon la période
  if (period === 'today') {
    // Trier par heure
    entries.sort((a, b) => {
      const hourA = parseInt(a[0]);
      const hourB = parseInt(b[0]);
      return hourA - hourB;
    });
  } else if (period === 'week') {
    // Ordre des jours de la semaine
    const dayOrder = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
    entries.sort((a, b) => dayOrder.indexOf(a[0]) - dayOrder.indexOf(b[0]));
  } else if (period === 'year') {
    // Ordre des mois
    const monthOrder = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'];
    entries.sort((a, b) => monthOrder.indexOf(a[0]) - monthOrder.indexOf(b[0]));
  } else if (period === 'month') {
    // Trier par jour
    entries.sort((a, b) => {
      const [dayA] = a[0].split('/').map(Number);
      const [dayB] = b[0].split('/').map(Number);
      return dayA - dayB;
    });
  }

  return entries.map(([name, value]) => ({
    name,
    value: Math.round(value),
  }));
};







export function ChartDataven({ 
  items, 
  period, 
  className, 
  type = 'area',  // ✅ Valeur par défaut typée
  title,
  showLabels = true,
  yAxisLabel = "Montant en K€"
}: CAEvolutionChartProps) {
  const chartData = useMemo(() => {
    if (!items || items.length === 0) return [];

    const filteredFactures = filterItemByPeriod(items, period);
    const grouped = groupFacturesByPeriod(filteredFactures, period);
    const formatted = formatChartData(grouped, period);

    return [...formatted].sort((a, b) => {
      const [monthA, yearA] = a.name.split("/").map(Number);
      const [monthB, yearB] = b.name.split("/").map(Number);

      const dateA = new Date(yearA, monthA - 1) as any
      const dateB = new Date(yearB, monthB - 1) as any

      return dateA - dateB; // ancien → récent
    });
  }, [items, period]);


  

  return (
    <ChartCard
      title={title}
      type={type}
      data={chartData}
      className={className}
      height={300}
      showLabels={showLabels}
      yAxisLabel={yAxisLabel}
    />
  );
}

export default ChartDataven;





// ============================================
// GRAPHIQUE CA PAR STATUT
// ============================================
export function ChartByStatusChart({ items, title, period, className }: CAEvolutionChartProps) {
  const chartData = useMemo(() => {
    if (!items || items.length === 0) return [];

    const filteredFactures = filterItemByPeriod(items, period);

    const statusLabels: Record<number, string> = {
        0: "Saisi",
        1: "Confirmé",
        2: 'Accepté',
        3: 'Perdu',
        4: 'Archivé',
        // 5: 'Transformé',
        // 6: 'Annulé'
    };

    const statusColors: Record<number, string> = {
        0: '#6b7280', // Brouillon → Gris
        1: '#f59e0b', // En attente → Jaune
        2: '#10b981', // Accepté → Vert
        3: '#ef4444', // Perdu → Rouge
        4: '#fb923c', // Archivé → Orange
        5: '#3b82f6', // Transformé → Bleu
        6: '#ef4444', // Annulé → Rouge
    };

    const grouped = filteredFactures.reduce((acc, facture) => {
      const status = facture.statut;
      acc[status] = (acc[status] || 0) + facture.total_ht;
      return acc;
    }, {} as Record<number, number>);

    return Object.entries(grouped).map(([status, value]) => ({
      name: statusLabels[parseInt(status)] || `Statut ${status}`,
      value: Math.round(value as number),
      fill: statusColors[parseInt(status)] || '#941403',
    }));
  }, [items, period]);

  return (
    <ChartCard
      title={title}
      type="donut"
      data={chartData}
      className={className}
      height={300}
      showTotal={false}      // ✅ Masque le total
      showLabels={false}     // ✅ Masque les labels sur le graphique
      showYAxisLabel={false}
    />
  );
}



// ============================================
// GRAPHIQUE TOP CLIENTS
// ============================================
export function TopClientsChart({ items, title, period, className, limit = 5 }: CAEvolutionChartProps & { limit?: number }) {
  const chartData = useMemo(() => {
    if (!items || items.length === 0) return [];

    const filteredFactures = filterItemByPeriod(items, period);

    const clientsCA = filteredFactures
      .filter(f => f.statut === 2) // Seulement payées
      .reduce((acc, facture) => {
        const client = facture.client_intitule;
        acc[client] = (acc[client] || 0) + facture.total_ht;
        return acc;
      }, {} as Record<string, number>) 

    return (Object.entries(clientsCA) as [string, number][])
        .sort((a, b) => b[1] - a[1])
        .slice(0, limit)
        .map(([name, value]) => ({
            name: name.length > 20 ? name.substring(0, 20) + '...' : name,
            value: Math.round(value),
    }));
  }, [items, period, limit]);

  console.log("chartData : ",chartData);
  

  return (
    <ChartCard
      title={`Top ${limit} ${title}`}
      type="bar"
      data={chartData}
      className={className}
      height={300}
       showTotal={false}      // ✅ Masque le total
      showLabels={false}     // ✅ Masque les labels sur le graphique
      showYAxisLabel={false}
    />
  );
}

