import React, { useMemo } from 'react';
import { WorkoutSession, ExerciseType, Language } from '../types';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts';
import { t } from '../services/i18n';

interface StatsProps {
  sessions: WorkoutSession[];
  lang: Language;
}

const Stats: React.FC<StatsProps> = ({ sessions, lang }) => {
  
  const volumeData = useMemo(() => {
      const data = [...sessions].reverse().map(session => {
          const sessionWeight = session.userBodyWeight || 70;
          const work = session.sets.reduce((acc, set) => {
              let setWork = 0;
              const reps = set.reps || 0;
              const weight = set.weight || 0;
              if (set.type === ExerciseType.STRENGTH) {
                  setWork = weight * reps;
              } else if (set.type === ExerciseType.BODYWEIGHT) {
                  const percentage = set.bodyWeightPercentage || 100;
                  const effectiveBw = sessionWeight * (percentage / 100);
                  setWork = (effectiveBw + weight) * reps;
              } else if (set.type === ExerciseType.STATIC) {
                  setWork = 0; 
              }
              return acc + Math.max(0, setWork);
          }, 0);

          return {
              date: new Date(session.startTime).toLocaleDateString(lang === 'ru' ? 'ru-RU' : 'en-US', { day: 'numeric', month: 'short' }),
              work: Math.round(work)
          };
      }).filter(d => d.work > 0);
      return data;
  }, [sessions, lang]);

  const setsData = useMemo(() => {
      return [...sessions].reverse().map(session => ({
          date: new Date(session.startTime).toLocaleDateString(lang === 'ru' ? 'ru-RU' : 'en-US', { day: 'numeric', month: 'short' }),
          sets: session.sets.length
      }));
  }, [sessions, lang]);

  const weightData = useMemo(() => {
      return [...sessions].reverse()
        .filter(s => s.userBodyWeight)
        .map(session => ({
            date: new Date(session.startTime).toLocaleDateString(lang === 'ru' ? 'ru-RU' : 'en-US', { day: 'numeric', month: 'short' }),
            weight: session.userBodyWeight
        }));
  }, [sessions, lang]);

  if (sessions.length < 2) {
      return (
          <div className="p-8 text-center text-on-surface-variant flex flex-col items-center justify-center h-full">
              <p>{t('not_enough_data', lang)}</p>
          </div>
      )
  }

  return (
    <div className="h-full overflow-y-auto p-4 space-y-6 pb-24 bg-surface">
      <h2 className="text-3xl font-normal text-on-surface mb-2 pl-2">{t('progress', lang)}</h2>

      {/* Volume Chart */}
      <div className="bg-surface-container p-5 rounded-[24px] shadow-elevation-1 border border-outline-variant/20">
        <div className="flex justify-between items-end mb-6">
             <div>
                <h3 className="text-title-medium font-medium text-on-surface">{t('volume_title', lang)}</h3>
                <p className="text-xs text-on-surface-variant mt-1">{t('volume_subtitle', lang)}</p>
             </div>
        </div>
        <div className="h-64 w-full">
            <ResponsiveContainer width="100%" height="100%">
                <LineChart data={volumeData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#49454F" vertical={false} opacity={0.5} />
                    <XAxis dataKey="date" stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} dy={10} />
                    <YAxis stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(val) => `${(val/1000).toFixed(1)}k`} />
                    <Tooltip 
                        contentStyle={{ backgroundColor: '#2B2930', borderColor: '#49454F', color: '#E6E0E9', borderRadius: '12px' }}
                        itemStyle={{ color: '#D0BCFF' }}
                        formatter={(val: number) => [`${val.toLocaleString()} kg`, t('volume_title', lang)]}
                    />
                    <Line type="monotone" dataKey="work" stroke="#D0BCFF" strokeWidth={3} dot={{r: 4, fill: '#D0BCFF'}} activeDot={{r: 6}} />
                </LineChart>
            </ResponsiveContainer>
        </div>
      </div>

      {/* Sets Chart */}
      <div className="bg-surface-container p-5 rounded-[24px] shadow-elevation-1 border border-outline-variant/20">
        <h3 className="text-title-medium font-medium text-on-surface mb-6">{t('sets_title', lang)}</h3>
        <div className="h-64 w-full">
            <ResponsiveContainer width="100%" height="100%">
                <BarChart data={setsData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#49454F" vertical={false} opacity={0.5} />
                    <XAxis dataKey="date" stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} dy={10} />
                    <YAxis stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} />
                    <Tooltip 
                        contentStyle={{ backgroundColor: '#2B2930', borderColor: '#49454F', color: '#E6E0E9', borderRadius: '12px' }}
                        cursor={{fill: 'rgba(255,255,255,0.05)'}}
                    />
                    <Bar dataKey="sets" fill="#CCC2DC" radius={[4, 4, 0, 0]} />
                </BarChart>
            </ResponsiveContainer>
        </div>
      </div>

      {/* Body Weight Chart */}
      <div className="bg-surface-container p-5 rounded-[24px] shadow-elevation-1 border border-outline-variant/20">
        <h3 className="text-title-medium font-medium text-on-surface mb-6">{t('weight_title', lang)}</h3>
        <div className="h-64 w-full">
            <ResponsiveContainer width="100%" height="100%">
                <LineChart data={weightData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#49454F" vertical={false} opacity={0.5} />
                    <XAxis dataKey="date" stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} dy={10} />
                    <YAxis domain={['auto', 'auto']} stroke="#CAC4D0" fontSize={12} tickLine={false} axisLine={false} />
                    <Tooltip 
                        contentStyle={{ backgroundColor: '#2B2930', borderColor: '#49454F', color: '#E6E0E9', borderRadius: '12px' }}
                        itemStyle={{ color: '#6EE7B7' }}
                        formatter={(val: number) => [`${val} kg`, t('weight_kg', lang)]}
                    />
                    <Line type="monotone" dataKey="weight" stroke="#6EE7B7" strokeWidth={3} dot={{r: 4, fill: '#6EE7B7'}} activeDot={{r: 6}} />
                </LineChart>
            </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
};

export default Stats;