'use client'

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

interface TimelineDataPoint {
  date: string
  daily: number
  cumulative: number
}

interface EvaluationTimelineProps {
  data: TimelineDataPoint[]
}

export function EvaluationTimelineChart({ data }: EvaluationTimelineProps) {
  // Format date for display
  const formattedData = data.map((d) => ({
    ...d,
    dateFormatted: new Date(d.date).toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
    }),
  }))

  const totalEvaluations =
    data.length > 0 ? data[data.length - 1].cumulative : 0

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span>Evaluation Progress Over Time</span>
          <span className="text-sm font-normal text-muted-foreground">
            Total: {totalEvaluations} evaluations
          </span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <ComposedChart
              data={formattedData}
              margin={{ top: 20, right: 30, bottom: 20, left: 20 }}
            >
              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
              <XAxis
                dataKey="dateFormatted"
                tick={{ fontSize: 12 }}
                interval="preserveStartEnd"
              />
              <YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
              <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
              <Tooltip
                contentStyle={{
                  backgroundColor: 'hsl(var(--card))',
                  border: '1px solid hsl(var(--border))',
                  borderRadius: '6px',
                }}
                formatter={(value: number | undefined, name: string | undefined) => [
                  value ?? 0,
                  (name ?? '') === 'daily' ? 'Daily' : 'Cumulative',
                ]}
                labelFormatter={(label) => `Date: ${label}`}
              />
              <Legend />
              <Bar
                yAxisId="left"
                dataKey="daily"
                name="Daily Evaluations"
                fill="#8884d8"
                radius={[4, 4, 0, 0]}
              />
              <Line
                yAxisId="right"
                type="monotone"
                dataKey="cumulative"
                name="Cumulative Total"
                stroke="#82ca9d"
                strokeWidth={2}
                dot={{ r: 3 }}
                activeDot={{ r: 6 }}
              />
            </ComposedChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}