/**
 * Gauge Chart Component
 * Displays a single value as a gauge/meter
 */

import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';

interface GaugeProps {
  value: number;
  max?: number;
  title?: string;
  unit?: string;
  size?: number;
  colors?: { low: string; medium: string; high: string };
  thresholds?: { low: number; high: number };
}

const DEFAULT_COLORS = {
  low: '#ef4444',
  medium: '#f59e0b',
  high: '#10b981',
};

export default function Gauge({
  value,
  max = 100,
  title,
  unit = '%',
  size = 200,
  colors = DEFAULT_COLORS,
  thresholds = { low: 33, high: 66 },
}: GaugeProps) {
  const percentage = Math.min((value / max) * 100, 100);

  // Determine color based on thresholds
  let color: string;
  if (percentage < thresholds.low) {
    color = colors.low;
  } else if (percentage < thresholds.high) {
    color = colors.medium;
  } else {
    color = colors.high;
  }

  // Data for semi-circle gauge
  const gaugeData = [
    { value: percentage, color },
    { value: 100 - percentage, color: '#e5e7eb' },
  ];

  return (
    <div className="bg-white rounded-lg shadow-lg p-6 flex flex-col items-center">
      {title && <h3 className="text-lg font-bold text-gray-900 mb-2">{title}</h3>}
      <div className="relative" style={{ width: size, height: size / 2 + 20 }}>
        <ResponsiveContainer width="100%" height={size}>
          <PieChart>
            <Pie
              data={gaugeData}
              cx="50%"
              cy="100%"
              startAngle={180}
              endAngle={0}
              innerRadius={size * 0.3}
              outerRadius={size * 0.4}
              paddingAngle={0}
              dataKey="value"
            >
              {gaugeData.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} stroke="none" />
              ))}
            </Pie>
          </PieChart>
        </ResponsiveContainer>
        <div
          className="absolute inset-0 flex flex-col items-center justify-end pb-2"
          style={{ top: size * 0.2 }}
        >
          <span className="text-3xl font-bold" style={{ color }}>
            {value.toFixed(1)}
          </span>
          <span className="text-sm text-gray-500">{unit}</span>
        </div>
      </div>
      <div className="flex justify-between w-full mt-2 px-4 text-xs text-gray-500">
        <span>0</span>
        <span>{max / 2}</span>
        <span>{max}</span>
      </div>
    </div>
  );
}