'use client'

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Cell,
} from 'recharts'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

interface ScoreDistributionProps {
  data: { score: number; count: number }[]
  averageScore: number
  totalScores: number
}

const COLORS = [
  '#de0f1e', // 1 - red (poor)
  '#e6382f',
  '#ed6141',
  '#f38a52',
  '#f8b364', // 5 - yellow (average)
  '#c9c052',
  '#99cc41',
  '#6ad82f',
  '#3be31e',
  '#0bd90f', // 10 - green (excellent)
]

export function ScoreDistributionChart({
  data,
  averageScore,
  totalScores,
}: ScoreDistributionProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span>Score Distribution</span>
          <span className="text-sm font-normal text-muted-foreground">
            Avg: {averageScore.toFixed(2)} ({totalScores} scores)
          </span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart
              data={data}
              margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
            >
              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
              <XAxis
                dataKey="score"
                label={{
                  value: 'Score',
                  position: 'insideBottom',
                  offset: -10,
                }}
              />
              <YAxis
                label={{
                  value: 'Count',
                  angle: -90,
                  position: 'insideLeft',
                }}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: 'hsl(var(--card))',
                  border: '1px solid hsl(var(--border))',
                  borderRadius: '6px',
                }}
                formatter={(value: number | undefined) => [value ?? 0, 'Count']}
                labelFormatter={(label) => `Score: ${label}`}
              />
              <Bar dataKey="count" radius={[4, 4, 0, 0]}>
                {data.map((_, index) => (
                  <Cell key={`cell-${index}`} fill={COLORS[index]} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}