MOPC-Portal/src/components/charts/evaluation-timeline.tsx

'use client'

import { ResponsiveLine } from '@nivo/line'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { nivoTheme, BRAND_DARK_BLUE } from './chart-theme'

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

interface EvaluationTimelineProps {
  data: TimelineDataPoint[]
}

export function EvaluationTimelineChart({ data }: EvaluationTimelineProps) {
  if (!data?.length) return null

  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

  const lineData = [
    {
      id: 'Cumulative Evaluations',
      data: formattedData.map((d) => ({
        x: d.dateFormatted,
        y: d.cumulative,
      })),
    },
  ]

  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 style={{ height: '300px' }}>
          <ResponsiveLine
            data={lineData}
            theme={nivoTheme}
            colors={[BRAND_DARK_BLUE]}
            enableArea={true}
            areaOpacity={0.1}
            areaBaselineValue={0}
            curve="monotoneX"
            pointSize={6}
            pointColor={BRAND_DARK_BLUE}
            pointBorderWidth={2}
            pointBorderColor="#ffffff"
            useMesh={true}
            enableSlices="x"
            sliceTooltip={({ slice }) => {
              const point = slice.points[0]
              const dataItem = formattedData.find(
                (d) => d.dateFormatted === point.data.xFormatted
              )
              return (
                <div
                  style={{
                    background: '#fff',
                    padding: '8px 12px',
                    border: '1px solid #e5e7eb',
                    borderRadius: '8px',
                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                  }}
                >
                  <strong>{point.data.xFormatted}</strong>
                  <div>Cumulative: {point.data.yFormatted}</div>
                  {dataItem && <div>Daily: {dataItem.daily}</div>}
                </div>
              )
            }}
            margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
            axisBottom={{
              tickRotation: -45,
              legend: '',
              legendOffset: 36,
            }}
            axisLeft={{
              legend: 'Evaluations',
              legendOffset: -50,
              legendPosition: 'middle',
            }}
            yScale={{ type: 'linear', min: 0, max: 'auto' }}
          />
        </div>
      </CardContent>
    </Card>
  )
}