"use client";

import React from 'react';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Cell
} from 'recharts';

interface CountryHistogramProps {
  data: { country: string; impressions: number; visitors: number }[];
  title: string;
}

export default function CountryHistogram({ data, title }: CountryHistogramProps) {
  const [mounted, setMounted] = React.useState(false);

  React.useEffect(() => {
    setMounted(true);
  }, []);

  // Take top 10 for readability
  const chartData = data.slice(0, 10).map(item => ({
    name: item.country || 'Inconnu',
    "Impressions": item.impressions,
    "V. Uniques": item.visitors
  }));

  return (
    <div className="card bg-slate-900/50 border border-slate-800 p-6">
      <h2 className="text-xl font-bold text-white mb-6 flex items-center gap-2">
        {title}
      </h2>
      
      <div className="h-[400px] w-full flex items-center justify-center">
        {!mounted ? (
          <p className="text-slate-500 text-xs font-bold uppercase tracking-widest animate-pulse">Chargement du graphique...</p>
        ) : (
          <ResponsiveContainer width="100%" height="100%">
          <BarChart
            data={chartData}
            margin={{
              top: 5,
              right: 30,
              left: 20,
              bottom: 5,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
            <XAxis 
              dataKey="name" 
              stroke="#64748b" 
              fontSize={10} 
              tickLine={false} 
              axisLine={false}
              interval={0}
            />
            <YAxis 
              stroke="#64748b" 
              fontSize={10} 
              tickLine={false} 
              axisLine={false}
              tickFormatter={(value) => value.toLocaleString()}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: '#0f172a',
                border: '1px solid #1e293b',
                borderRadius: '8px',
                fontSize: '12px'
              }}
              itemStyle={{ padding: '2px 0' }}
              cursor={{ fill: 'rgba(255, 255, 255, 0.05)' }}
            />
            <Legend 
              verticalAlign="top" 
              align="right" 
              iconType="circle"
              wrapperStyle={{ paddingBottom: '20px', fontSize: '10px', textTransform: 'uppercase', fontWeight: 'bold' }}
            />
            <Bar 
              dataKey="Impressions" 
              fill="#6366f1" 
              radius={[4, 4, 0, 0]} 
              barSize={20}
              animationDuration={1500}
            />
            <Bar 
              dataKey="V. Uniques" 
              fill="#10b981" 
              radius={[4, 4, 0, 0]} 
              barSize={20}
              animationDuration={1500}
            />
          </BarChart>
        </ResponsiveContainer>
        )}
      </div>
    </div>
  );
}