'use client';

import { PieChart, Pie, Cell } from 'recharts';
import { getScoreColor, getScoreLabel } from '../styles/report-theme';
import { useReportLocale, ReportLocale } from '../i18n/useReportLocale';

interface ReputationScoreGaugeProps {
  score: number;
  label?: string;
  locale?: string;
}

export default function ReputationScoreGauge({ score, label, locale = 'en' }: ReputationScoreGaugeProps) {
  const clampedScore = Math.max(0, Math.min(100, score));
  const color = getScoreColor(clampedScore);
  const bandLabel = label || getScoreLabel(clampedScore, locale);
  const { t } = useReportLocale(locale as ReportLocale);

  const data = [
    { value: clampedScore },
    { value: 100 - clampedScore },
  ];

  return (
    <div className="flex flex-col items-center">
      <div className="relative w-48 h-48">
        <PieChart width={192} height={192}>
          <Pie
            data={data}
            cx={91}
            cy={91}
            startAngle={225}
            endAngle={-45}
            innerRadius={65}
            outerRadius={85}
            dataKey="value"
            stroke="none"
          >
            <Cell fill={color} />
            <Cell fill="#e5e7eb" />
          </Pie>
        </PieChart>
        <div className="absolute inset-0 flex flex-col items-center justify-center">
          <span className="text-5xl font-bold" style={{ color }}>{clampedScore}</span>
          <span style={{ fontSize: 11, color: '#9ca3af', letterSpacing: 0.5, marginTop: 1 }}>{t('out_of_100')}</span>
          <span className="text-sm text-gray-500 mt-1">{bandLabel}</span>
        </div>
      </div>
      {/* 5-band scale bar */}
      <div style={{ width: 180, marginTop: 8 }}>
        <div style={{ display: 'flex', height: 6, borderRadius: 3, overflow: 'hidden' }}>
          <div style={{ width: '40%', backgroundColor: '#ef4444' }} />
          <div style={{ width: '20%', backgroundColor: '#f97316' }} />
          <div style={{ width: '15%', backgroundColor: '#f59e0b' }} />
          <div style={{ width: '15%', backgroundColor: '#22c55e' }} />
          <div style={{ width: '10%', backgroundColor: '#059669' }} />
        </div>
        {/* Score position indicator */}
        <div style={{ position: 'relative', height: 8 }}>
          <div style={{
            position: 'absolute',
            left: `${clampedScore}%`,
            transform: 'translateX(-50%)',
            width: 0, height: 0,
            borderLeft: '4px solid transparent',
            borderRight: '4px solid transparent',
            borderBottom: `6px solid ${color}`,
          }} />
        </div>
        {/* Band labels */}
        <div style={{ display: 'flex', fontSize: 8, color: '#9ca3af', marginTop: 1 }}>
          {(() => {
            const labels = locale === 'es'
              ? ['Crít.', 'Malo', 'Reg.', 'Bueno', 'Exc.']
              : ['Critical', 'Poor', 'Fair', 'Good', 'Exc.'];
            const widths = ['40%', '20%', '15%', '15%', '10%'];
            return labels.map((lbl, i) => (
              <span key={i} style={{ width: widths[i], textAlign: 'center' }}>{lbl}</span>
            ));
          })()}
        </div>
      </div>
    </div>
  );
}
