import { Loader2 } from "lucide-react";
import { useDashboard } from "./context/DashboardContext";
import { useTranslation } from "react-i18next";

export function ResolutionRateChart() {
  const { t } = useTranslation();
  const { stats, loading } = useDashboard();

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="w-8 h-8 text-slate-400 animate-spin" />
      </div>
    );
  }

  const resolutionRate = stats?.resolutionRate?.value || 0;
  const dailyChange = stats?.resolutionRate?.dailyChange || '+0.0%';
  const weeklyChange = stats?.resolutionRate?.weeklyChange || '+0.0%';

  // Calculate strokeDashoffset for circular progress
  const circumference = 2 * Math.PI * 45; // 2πr where r=45
  const offset = circumference - (resolutionRate / 100) * circumference;

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-semibold text-white">{t('dashboard.charts.resolutionRate')}</h3>
      </div>

      <div className="flex items-center justify-center">
        <div className="relative w-48 h-48">
          <svg className="w-48 h-48 transform -rotate-90" viewBox="0 0 100 100">
            <circle
              cx="50"
              cy="50"
              r="45"
              stroke="currentColor"
              strokeWidth="8"
              fill="transparent"
              className="text-slate-700"
            />
            <circle
              cx="50"
              cy="50"
              r="45"
              stroke="currentColor"
              strokeWidth="8"
              fill="transparent"
              strokeDasharray={circumference}
              strokeDashoffset={offset}
              className="text-cyan-500"
            />
          </svg>

          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <div className="text-4xl font-bold text-white">{resolutionRate.toFixed(1)}%</div>
            <div className="text-sm text-slate-400">{t('analytics.charts.resolutionRateTrend')}</div>
          </div>
        </div>
      </div>

      <div className="space-y-3">
        <div className="flex justify-between items-center">
          <span className="text-slate-400">Daily Change</span>
          <span className={`font-medium ${
            parseFloat(dailyChange) >= 0 ? 'text-green-500' : 'text-red-500'
          }`}>
            {parseFloat(dailyChange) >= 0 ? '↗' : '↘'} {dailyChange}
          </span>
        </div>

        <div className="flex justify-between items-center">
          <span className="text-slate-400">Weekly Change</span>
          <span className={`font-medium ${
            parseFloat(weeklyChange) >= 0 ? 'text-green-500' : 'text-red-500'
          }`}>
            {parseFloat(weeklyChange) >= 0 ? '↗' : '↘'} {weeklyChange}
          </span>
        </div>
      </div>
    </div>
  );
}
