'use client';

import { RadialBar, RadialBarChart, ResponsiveContainer } from 'recharts';

import { TODAY_CHART_PRIMARY_COLOR } from '@/components/today/chart-theme';

interface TodayRadialGaugeChartProps {
  percent: number;
  completed: number;
  total: number;
  percentLabel: string;
  tasksLabel: string;
}

export function TodayRadialGaugeChart({
  percent,
  completed,
  total,
  percentLabel,
  tasksLabel,
}: TodayRadialGaugeChartProps) {
  const clamped = Math.max(0, Math.min(100, percent));
  const data = [{ name: 'completion', value: clamped, fill: TODAY_CHART_PRIMARY_COLOR }];

  return (
    <div className="relative h-[240px] w-full">
      <ResponsiveContainer width="100%" height="100%">
        <RadialBarChart
          cx="50%"
          cy="50%"
          innerRadius="68%"
          outerRadius="100%"
          barSize={14}
          data={data}
          startAngle={90}
          endAngle={-270}
        >
          <RadialBar
            background={{ fill: 'rgba(41, 69, 106, 0.55)' }}
            dataKey="value"
            cornerRadius={8}
          />
        </RadialBarChart>
      </ResponsiveContainer>
      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center">
        <span className="text-3xl font-semibold text-text-primary">{percentLabel}</span>
        <span className="mt-1 text-xs text-text-muted">{tasksLabel}</span>
        {total > 0 ? (
          <span className="mt-0.5 text-[11px] text-text-secondary">
            {completed}/{total}
          </span>
        ) : null}
      </div>
    </div>
  );
}