'use client'

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

interface JurorWorkloadData {
  id: string
  name: string
  assigned: number
  completed: number
  completionRate: number
}

interface JurorWorkloadProps {
  data: JurorWorkloadData[]
}

export function JurorWorkloadChart({ data }: JurorWorkloadProps) {
  // Truncate names for display
  const formattedData = data.map((d) => ({
    ...d,
    displayName: d.name.length > 15 ? d.name.substring(0, 15) + '...' : d.name,
  }))

  const totalAssigned = data.reduce((sum, d) => sum + d.assigned, 0)
  const totalCompleted = data.reduce((sum, d) => sum + d.completed, 0)
  const overallRate =
    totalAssigned > 0 ? Math.round((totalCompleted / totalAssigned) * 100) : 0

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span>Juror Workload</span>
          <span className="text-sm font-normal text-muted-foreground">
            {overallRate}% overall completion
          </span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[400px]">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart
              data={formattedData}
              layout="vertical"
              margin={{ top: 20, right: 30, bottom: 20, left: 100 }}
            >
              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
              <XAxis type="number" />
              <YAxis
                dataKey="displayName"
                type="category"
                width={90}
                tick={{ fontSize: 12 }}
              />
              <Tooltip
                contentStyle={{
                  backgroundColor: 'hsl(var(--card))',
                  border: '1px solid hsl(var(--border))',
                  borderRadius: '6px',
                }}
                formatter={(value: number | undefined, name: string | undefined) => [
                  value ?? 0,
                  (name ?? '') === 'assigned' ? 'Assigned' : 'Completed',
                ]}
                labelFormatter={(_, payload) => {
                  if (payload && payload[0]) {
                    const item = payload[0].payload as JurorWorkloadData
                    return `${item.name} (${item.completionRate}% complete)`
                  }
                  return ''
                }}
              />
              <Legend />
              <Bar
                dataKey="assigned"
                name="Assigned"
                fill="#8884d8"
                radius={[0, 4, 4, 0]}
              />
              <Bar
                dataKey="completed"
                name="Completed"
                fill="#82ca9d"
                radius={[0, 4, 4, 0]}
              />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}