MOPC-Portal/src/components/admin/evaluation-summary-card.tsx

'use client'

import { useState } from 'react'
import { trpc } from '@/lib/trpc/client'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import {
  Bot,
  FileText,
  RefreshCw,
  Loader2,
  CheckCircle2,
  AlertTriangle,
  Clock,
  Users,
  Target,
} from 'lucide-react'
import { toast } from 'sonner'
import { formatDistanceToNow } from 'date-fns'

interface EvaluationSummaryCardProps {
  projectId: string
  roundId: string
}

interface BooleanStats {
  yesCount: number
  noCount: number
  total: number
  yesPercent: number
  trueLabel: string
  falseLabel: string
}

interface ScoringPatterns {
  averageGlobalScore: number | null
  consensus: number
  criterionAverages: Record<string, number>
  booleanCriteria?: Record<string, BooleanStats>
  textResponses?: Record<string, string[]>
  evaluatorCount: number
}

interface ThemeItem {
  theme: string
  sentiment: 'positive' | 'negative' | 'mixed'
  frequency: number
}

interface SummaryJson {
  overallAssessment: string
  strengths: string[]
  weaknesses: string[]
  themes: ThemeItem[]
  recommendation: string
  scoringPatterns: ScoringPatterns
}

const sentimentColors: Record<string, { badge: 'default' | 'secondary' | 'destructive'; bg: string }> = {
  positive: { badge: 'default', bg: 'bg-green-500/10 text-green-700' },
  negative: { badge: 'destructive', bg: 'bg-red-500/10 text-red-700' },
  mixed: { badge: 'secondary', bg: 'bg-amber-500/10 text-amber-700' },
}

export function EvaluationSummaryCard({
  projectId,
  roundId,
}: EvaluationSummaryCardProps) {
  const [isGenerating, setIsGenerating] = useState(false)

  const {
    data: summary,
    isLoading,
    refetch,
  } = trpc.evaluation.getSummary.useQuery({ projectId, roundId })

  const generateMutation = trpc.evaluation.generateSummary.useMutation({
    onSuccess: () => {
      toast.success('AI summary generated successfully')
      refetch()
      setIsGenerating(false)
    },
    onError: (error) => {
      toast.error(error.message || 'Failed to generate summary')
      setIsGenerating(false)
    },
  })

  const handleGenerate = () => {
    setIsGenerating(true)
    generateMutation.mutate({ projectId, roundId })
  }

  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <Skeleton className="h-5 w-48" />
          <Skeleton className="h-4 w-64" />
        </CardHeader>
        <CardContent className="space-y-4">
          <Skeleton className="h-20 w-full" />
          <Skeleton className="h-16 w-full" />
        </CardContent>
      </Card>
    )
  }

  // No summary exists yet
  if (!summary) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="text-lg flex items-center gap-2">
            <FileText className="h-5 w-5" />
            AI Evaluation Summary
          </CardTitle>
          <CardDescription>
            Generate an AI-powered analysis of jury evaluations
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center py-6 text-center">
            <FileText className="h-10 w-10 text-muted-foreground/50 mb-3" />
            <p className="text-sm text-muted-foreground mb-4">
              No summary generated yet. Click below to analyze submitted evaluations.
            </p>
            <Button onClick={handleGenerate} disabled={isGenerating}>
              {isGenerating ? (
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              ) : (
                <FileText className="mr-2 h-4 w-4" />
              )}
              {isGenerating ? 'Generating...' : 'Generate Summary'}
            </Button>
          </div>
        </CardContent>
      </Card>
    )
  }

  const summaryData = summary.summaryJson as unknown as SummaryJson
  const patterns = summaryData.scoringPatterns

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-lg flex items-center gap-2">
              <FileText className="h-5 w-5" />
              AI Evaluation Summary
              <Badge variant="outline" className="text-xs gap-1 shrink-0 ml-1">
                <Bot className="h-3 w-3" />
                AI Generated
              </Badge>
            </CardTitle>
            <CardDescription className="flex items-center gap-2 mt-1">
              <Clock className="h-3 w-3" />
              Generated {formatDistanceToNow(new Date(summary.generatedAt), { addSuffix: true })}
              {' '}using {summary.model}
            </CardDescription>
          </div>
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button variant="outline" size="sm" disabled={isGenerating}>
                {isGenerating ? (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                ) : (
                  <RefreshCw className="mr-2 h-4 w-4" />
                )}
                Regenerate
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Regenerate Summary</AlertDialogTitle>
                <AlertDialogDescription>
                  This will replace the existing AI summary with a new one.
                  This uses your OpenAI API quota.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction onClick={handleGenerate}>
                  Regenerate
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Scoring Stats */}
        <div className="grid gap-3 sm:grid-cols-3">
          <div className="flex items-center gap-3 p-3 rounded-lg bg-muted">
            <Target className="h-5 w-5 text-muted-foreground" />
            <div>
              <p className="text-2xl font-bold">
                {patterns.averageGlobalScore !== null
                  ? patterns.averageGlobalScore.toFixed(1)
                  : '-'}
              </p>
              <p className="text-xs text-muted-foreground">Avg Score</p>
            </div>
          </div>
          <div className="flex items-center gap-3 p-3 rounded-lg bg-muted">
            <CheckCircle2 className="h-5 w-5 text-muted-foreground" />
            <div>
              <p className="text-2xl font-bold">
                {Math.round(patterns.consensus * 100)}%
              </p>
              <p className="text-xs text-muted-foreground">Consensus</p>
            </div>
          </div>
          <div className="flex items-center gap-3 p-3 rounded-lg bg-muted">
            <Users className="h-5 w-5 text-muted-foreground" />
            <div>
              <p className="text-2xl font-bold">{patterns.evaluatorCount}</p>
              <p className="text-xs text-muted-foreground">Evaluators</p>
            </div>
          </div>
        </div>

        {/* Overall Assessment */}
        <div>
          <p className="text-sm font-medium mb-2">Overall Assessment</p>
          <p className="text-sm text-muted-foreground leading-relaxed">
            {summaryData.overallAssessment}
          </p>
        </div>

        {/* Strengths & Weaknesses */}
        <div className="grid gap-4 sm:grid-cols-2">
          {summaryData.strengths.length > 0 && (
            <div>
              <p className="text-sm font-medium mb-2 text-green-700">Strengths</p>
              <ul className="space-y-1">
                {summaryData.strengths.map((s, i) => (
                  <li key={i} className="flex items-start gap-2 text-sm">
                    <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-green-500 flex-shrink-0" />
                    {s}
                  </li>
                ))}
              </ul>
            </div>
          )}
          {summaryData.weaknesses.length > 0 && (
            <div>
              <p className="text-sm font-medium mb-2 text-amber-700">Weaknesses</p>
              <ul className="space-y-1">
                {summaryData.weaknesses.map((w, i) => (
                  <li key={i} className="flex items-start gap-2 text-sm">
                    <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-amber-500 flex-shrink-0" />
                    {w}
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>

        {/* Themes */}
        {summaryData.themes.length > 0 && (
          <div>
            <p className="text-sm font-medium mb-2">Key Themes</p>
            <div className="space-y-2">
              {summaryData.themes.map((theme, i) => (
                <div
                  key={i}
                  className="flex items-center justify-between p-2 rounded-lg border"
                >
                  <div className="flex items-center gap-2">
                    <Badge
                      className={sentimentColors[theme.sentiment]?.bg}
                      variant="outline"
                    >
                      {theme.sentiment}
                    </Badge>
                    <span className="text-sm">{theme.theme}</span>
                  </div>
                  <span className="text-xs text-muted-foreground">
                    {theme.frequency} mention{theme.frequency !== 1 ? 's' : ''}
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Criterion Averages (Numeric) */}
        {Object.keys(patterns.criterionAverages).length > 0 && (
          <div>
            <p className="text-sm font-medium mb-2">Score Averages</p>
            <div className="space-y-2">
              {Object.entries(patterns.criterionAverages).map(([label, avg]) => (
                <div key={label} className="flex items-center gap-3">
                  <span className="text-sm text-muted-foreground flex-1 min-w-0 truncate">
                    {label}
                  </span>
                  <div className="flex items-center gap-2 flex-shrink-0">
                    <div className="w-24 h-2 rounded-full bg-muted overflow-hidden">
                      <div
                        className="h-full rounded-full bg-primary"
                        style={{ width: `${(avg / 10) * 100}%` }}
                      />
                    </div>
                    <span className="text-sm font-medium w-8 text-right">
                      {avg.toFixed(1)}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Boolean Criteria (Yes/No) */}
        {patterns.booleanCriteria && Object.keys(patterns.booleanCriteria).length > 0 && (
          <div>
            <p className="text-sm font-medium mb-2">Yes/No Decisions</p>
            <div className="space-y-3">
              {Object.entries(patterns.booleanCriteria).map(([label, stats]) => (
                <div key={label} className="space-y-1">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-muted-foreground truncate">
                      {label}
                    </span>
                    <span className="text-xs text-muted-foreground flex-shrink-0 ml-2">
                      {stats.yesCount} {stats.trueLabel} / {stats.noCount} {stats.falseLabel}
                    </span>
                  </div>
                  <div className="flex h-2 rounded-full overflow-hidden bg-muted">
                    {stats.yesCount > 0 && (
                      <div
                        className="h-full bg-emerald-500 transition-all"
                        style={{ width: `${stats.yesPercent}%` }}
                      />
                    )}
                    {stats.noCount > 0 && (
                      <div
                        className="h-full bg-red-400 transition-all"
                        style={{ width: `${100 - stats.yesPercent}%` }}
                      />
                    )}
                  </div>
                  <div className="flex justify-between text-xs">
                    <span className="text-emerald-600">{stats.yesPercent}% {stats.trueLabel}</span>
                    <span className="text-red-500">{100 - stats.yesPercent}% {stats.falseLabel}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Text Responses */}
        {patterns.textResponses && Object.keys(patterns.textResponses).length > 0 && (
          <div>
            <p className="text-sm font-medium mb-2">Text Responses</p>
            <div className="space-y-3">
              {Object.entries(patterns.textResponses).map(([label, responses]) => (
                <div key={label} className="space-y-1.5">
                  <p className="text-sm text-muted-foreground">{label}</p>
                  <div className="space-y-1.5">
                    {responses.map((text, i) => (
                      <div
                        key={i}
                        className="text-sm p-2 rounded border bg-muted/50 whitespace-pre-wrap"
                      >
                        {text}
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Recommendation */}
        {summaryData.recommendation && (
          <div className="p-3 rounded-lg bg-blue-500/10 border border-blue-200">
            <p className="text-sm font-medium text-blue-900 mb-1">
              Recommendation
            </p>
            <p className="text-sm text-blue-700">
              {summaryData.recommendation}
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  )
}