MOPC-Portal/src/components/charts/cross-round-comparison.tsx

'use client'

import { BarChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { BRAND_COLORS } from './chart-theme'

interface StageComparison {
  roundId: string
  roundName: string
  projectCount: number
  evaluationCount: number
  completionRate: number
  averageScore: number | null
  scoreDistribution: { score: number; count: number }[]
}

interface CrossStageComparisonProps {
  data: StageComparison[]
}

export function CrossStageComparisonChart({
  data,
}: CrossStageComparisonProps) {
  if (!data?.length) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center py-12">
          <p className="text-muted-foreground">No comparison data available</p>
        </CardContent>
      </Card>
    )
  }

  const baseData = data.map((round) => ({
    name:
      round.roundName.length > 20
        ? round.roundName.slice(0, 20) + '...'
        : round.roundName,
    Projects: round.projectCount,
    Evaluations: round.evaluationCount,
    'Completion Rate': round.completionRate,
    'Avg Score': round.averageScore
      ? parseFloat(round.averageScore.toFixed(2))
      : 0,
  }))

  return (
    <Card>
      <CardHeader>
        <CardTitle>Round Metrics Comparison</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium">Projects</CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <BarChart
                data={baseData}
                index="name"
                categories={['Projects']}
                colors={[BRAND_COLORS[0]] as string[]}
                showLegend={false}
                yAxisWidth={40}
                className="h-[200px]"
                rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
              />
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium">
                Evaluations
              </CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <BarChart
                data={baseData}
                index="name"
                categories={['Evaluations']}
                colors={[BRAND_COLORS[2]] as string[]}
                showLegend={false}
                yAxisWidth={40}
                className="h-[200px]"
                rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
              />
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium">
                Completion Rate
              </CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <BarChart
                data={baseData}
                index="name"
                categories={['Completion Rate']}
                colors={[BRAND_COLORS[1]] as string[]}
                showLegend={false}
                maxValue={100}
                yAxisWidth={40}
                valueFormatter={(v) => `${v}%`}
                className="h-[200px]"
                rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
              />
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium">
                Average Score
              </CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <BarChart
                data={baseData}
                index="name"
                categories={['Avg Score']}
                colors={[BRAND_COLORS[0]] as string[]}
                showLegend={false}
                maxValue={10}
                yAxisWidth={40}
                className="h-[200px]"
                rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
              />
            </CardContent>
          </Card>
        </div>
      </CardContent>
    </Card>
  )
}