import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';

interface NutritionState {
  target: number;
  bmr: number;
  tdee: number;
  proteins: number;
  carbs: number;
  fats: number;
  protKcal: number;
  carbKcal: number;
  fatKcal: number;
  protPct: number;
  carbPct: number;
  fatPct: number;
  lang: 'fr' | 'en';
}

declare global {
  interface Window {
    nutritionState?: NutritionState;
    __rechartsNutritionMounted?: boolean;
  }
}

const DEFAULT_STATE: NutritionState = {
  target: 2994,
  bmr: 1770,
  tdee: 2744,
  proteins: 164,
  carbs: 418,
  fats: 74,
  protKcal: 656,
  carbKcal: 1672,
  fatKcal: 666,
  protPct: 22,
  carbPct: 56,
  fatPct: 22,
  lang: 'fr',
};

const RechartsNutritionPie: React.FC = () => {
  const [state, setState] = useState<NutritionState>(() => window.nutritionState || DEFAULT_STATE);

  useEffect(() => {
    const handleUpdate = (e: Event) => {
      const customEvent = e as CustomEvent<NutritionState>;
      if (customEvent.detail) {
        setState({ ...customEvent.detail });
      } else if (window.nutritionState) {
        setState({ ...window.nutritionState });
      }
    };

    window.addEventListener('bodyidol:nutrition-update', handleUpdate);
    if (window.nutritionState) {
      setState({ ...window.nutritionState });
    }
    return () => {
      window.removeEventListener('bodyidol:nutrition-update', handleUpdate);
    };
  }, []);

  const isFr = state.lang === 'fr';

  const data = [
    {
      name: isFr ? 'Glucides (Énergie)' : 'Carbohydrates (Energy)',
      shortName: isFr ? 'Glucides' : 'Carbs',
      value: state.carbKcal,
      grams: state.carbs,
      pct: state.carbPct,
      color: '#10B981', // Emerald
    },
    {
      name: isFr ? 'Protéines (Anabolisme)' : 'Proteins (Anabolism)',
      shortName: isFr ? 'Protéines' : 'Protein',
      value: state.protKcal,
      grams: state.proteins,
      pct: state.protPct,
      color: '#F4F4F5', // Platinum White
    },
    {
      name: isFr ? 'Lipides (Hormones)' : 'Dietary Fats (Hormones)',
      shortName: isFr ? 'Lipides' : 'Fats',
      value: state.fatKcal,
      grams: state.fats,
      pct: state.fatPct,
      color: '#D4AF37', // Metallic Gold
    },
  ];

  return (
    <div className="w-full h-64 relative flex items-center justify-center">
      {/* Center Target Calories Overlay */}
      <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-10">
        <span className="text-[10px] font-mono uppercase tracking-wider text-zinc-400">
          {isFr ? 'CIBLE / JOUR' : 'DAILY TARGET'}
        </span>
        <span className="font-display text-3xl text-gold-400 tabular-nums leading-none mt-0.5">
          {state.target.toLocaleString('fr-FR')}
        </span>
        <span className="text-[11px] font-mono text-emerald-400 font-semibold">kcal</span>
      </div>

      <ResponsiveContainer width="100%" height={240} minWidth={220} minHeight={220}>
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            innerRadius={64}
            outerRadius={94}
            paddingAngle={4}
            dataKey="value"
            stroke="#0F0F0F"
            strokeWidth={2}
            isAnimationActive={true}
            animationDuration={550}
          >
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={entry.color} />
            ))}
          </Pie>
          <Tooltip
            content={({ active, payload }) => {
              if (!active || !payload || !payload.length) return null;
              const item = payload[0].payload;
              return (
                <div className="bg-obsidian/95 border border-gold-500/40 rounded-xl px-3.5 py-2.5 shadow-xl text-xs">
                  <div className="font-title font-bold text-white flex items-center gap-2">
                    <span
                      className="w-2.5 h-2.5 rounded-full inline-block"
                      style={{ backgroundColor: item.color }}
                    />
                    <span>{item.name}</span>
                  </div>
                  <div className="font-mono text-zinc-300 mt-1 tabular-nums">
                    <strong className="text-gold-400">{item.grams} g</strong> · {item.value} kcal ({item.pct}%)
                  </div>
                </div>
              );
            }}
          />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
};

function mountNutritionChart() {
  const container = document.getElementById('recharts-nutrition-pie-root');
  if (container && !window.__rechartsNutritionMounted) {
    window.__rechartsNutritionMounted = true;
    const root = createRoot(container);
    root.render(<RechartsNutritionPie />);
  }
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountNutritionChart);
} else {
  mountNutritionChart();
}