'use client'

import { AreaChart } from '@tremor/react'
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) {
  if (!data?.length) return null

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

  const chartData = data.map((d) => ({
    date: new Date(d.date).toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
    }),
    Cumulative: d.cumulative,
    Daily: d.daily,
  }))

  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>
        <AreaChart
          data={chartData}
          index="date"
          categories={['Cumulative', 'Daily']}
          colors={['cyan', 'teal']}
          curveType="monotone"
          showGradient={true}
          yAxisWidth={50}
          className="h-[300px]"
        />
      </CardContent>
    </Card>
  )
}