'use client'

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

interface ProjectRankingData {
  id: string
  title: string
  teamName: string | null
  status: string
  averageScore: number | null
  evaluationCount: number
}

interface ProjectRankingsProps {
  data: ProjectRankingData[]
  limit?: number
}

// Generate color based on score (red to green gradient)
const getScoreColor = (score: number): string => {
  if (score >= 8) return '#0bd90f' // Excellent - green
  if (score >= 6) return '#82ca9d' // Good - light green
  if (score >= 4) return '#ffc658' // Average - yellow
  if (score >= 2) return '#ff7300' // Poor - orange
  return '#de0f1e' // Very poor - red
}

export function ProjectRankingsChart({
  data,
  limit = 20,
}: ProjectRankingsProps) {
  const displayData = data.slice(0, limit).map((d, index) => ({
    ...d,
    rank: index + 1,
    displayTitle:
      d.title.length > 25 ? d.title.substring(0, 25) + '...' : d.title,
    score: d.averageScore || 0,
  }))

  const averageScore =
    data.length > 0
      ? data.reduce((sum, d) => sum + (d.averageScore || 0), 0) / data.length
      : 0

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span>Project Rankings</span>
          <span className="text-sm font-normal text-muted-foreground">
            Top {displayData.length} of {data.length} projects
          </span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[500px]">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart
              data={displayData}
              layout="vertical"
              margin={{ top: 20, right: 30, bottom: 20, left: 150 }}
            >
              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
              <XAxis type="number" domain={[0, 10]} />
              <YAxis
                dataKey="displayTitle"
                type="category"
                width={140}
                tick={{ fontSize: 11 }}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: 'hsl(var(--card))',
                  border: '1px solid hsl(var(--border))',
                  borderRadius: '6px',
                }}
                formatter={(value: number | undefined) => [(value ?? 0).toFixed(2), 'Average Score']}
                labelFormatter={(_, payload) => {
                  if (payload && payload[0]) {
                    const item = payload[0].payload as ProjectRankingData & {
                      rank: number
                    }
                    return `#${item.rank} - ${item.title}${item.teamName ? ` (${item.teamName})` : ''}`
                  }
                  return ''
                }}
              />
              <ReferenceLine
                x={averageScore}
                stroke="#666"
                strokeDasharray="5 5"
                label={{
                  value: `Avg: ${averageScore.toFixed(1)}`,
                  position: 'top',
                  fill: '#666',
                  fontSize: 11,
                }}
              />
              <Bar dataKey="score" radius={[0, 4, 4, 0]}>
                {displayData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={getScoreColor(entry.score)} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}