'use client'

import { useState, useEffect, useMemo } from 'react'
import Link from 'next/link'
import { useSearchParams, useRouter, usePathname } from 'next/navigation'
import { trpc } from '@/lib/trpc/client'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Progress } from '@/components/ui/progress'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import {
  FileSpreadsheet,
  Download,
  BarChart3,
  Users,
  ClipboardList,
  CheckCircle2,
  TrendingUp,
  GitCompare,
  UserCheck,
  Globe,
  Layers,
  Trophy,
  ArrowRight,
  Hash,
  Sparkles,
  Loader2,
  AlertTriangle,
} from 'lucide-react'
import { toast } from 'sonner'
import { formatDateOnly } from '@/lib/utils'
import { getCountryName, getCountryFlag } from '@/lib/countries'
import {
  ScoreDistributionChart,
  EvaluationTimelineChart,
  StatusBreakdownChart,
  JurorWorkloadChart,
  ProjectRankingsChart,
  CriteriaScoresChart,
  GeographicDistribution,
  CrossStageComparisonChart,
  JurorConsistencyChart,
  DiversityMetricsChart,
} from '@/components/charts'
import { ExportPdfButton } from '@/components/shared/export-pdf-button'
import { AnimatedCard } from '@/components/shared/animated-container'

function ReportsOverview({ scope }: { scope: string | null }) {
  const { data: programs, isLoading } = trpc.program.list.useQuery({ includeStages: true })
  const { data: dashStats, isLoading: statsLoading } = trpc.analytics.getDashboardStats.useQuery()

  const rounds = programs?.flatMap(p =>
    ((p.stages ?? []) as Array<{ id: string; name: string; status: string; votingEndAt?: string | Date | null }>).map((s: { id: string; name: string; status: string; votingEndAt?: string | Date | null }) => ({ ...s, programId: p.id, programName: `${p.year} Edition` }))
  ) || []

  const scopeInput = parseSelection(scope)
  const hasScope = !!scopeInput.roundId || !!scopeInput.programId

  const selectedRound = scope ? rounds.find((r) => r.id === scope) : null
  const selectedScopeLabel = selectedRound
    ? `${selectedRound.programName} — ${selectedRound.name}`
    : scope?.startsWith('all:')
      ? `${programs?.find((p) => `all:${p.id}` === scope)?.year ?? ''} Edition — All Rounds`
      : 'All projects'

  const { data: projectRankings, isLoading: projectsLoading } =
    trpc.analytics.getProjectRankings.useQuery(
      { ...scopeInput, limit: 5000 },
      { enabled: hasScope }
    )

  // Applicant nationality breakdown — always runs (scope optional;
  // empty scope = global view across all programs).
  const { data: nationalityStats, isLoading: nationalityLoading } =
    trpc.analytics.getApplicantNationalities.useQuery(scopeInput)

  const nationalityScopeLabel = scopeInput.roundId
    ? 'in this round'
    : scopeInput.programId
      ? `in ${programs?.find((p) => p.id === scopeInput.programId)?.year ?? ''} Edition`
      : 'across all programs'

  if (isLoading || statsLoading) {
    return (
      <div className="space-y-6">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {[...Array(4)].map((_, i) => (
            <Card key={i}>
              <CardHeader className="space-y-0 pb-2">
                <Skeleton className="h-4 w-20" />
              </CardHeader>
              <CardContent>
                <Skeleton className="h-8 w-16" />
                <Skeleton className="mt-2 h-3 w-24" />
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    )
  }

  const totalPrograms = dashStats?.programCount ?? programs?.length ?? 0
  const totalProjects = dashStats?.projectCount ?? 0
  const activeRounds = dashStats?.activeRoundCount ?? rounds.filter((r: { status: string }) => r.status === 'ROUND_ACTIVE').length
  const jurorCount = dashStats?.jurorCount ?? 0
  const submittedEvaluations = dashStats?.submittedEvaluations ?? 0
  const totalAssignments = dashStats?.totalAssignments ?? 0
  const completionRate = dashStats?.completionRate ?? 0

  return (
    <div className="space-y-6">
      {/* Quick Stats */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <AnimatedCard index={0}>
          <Card className="border-l-4 border-l-blue-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
            <CardContent className="p-5">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Programs</p>
                  <p className="text-2xl font-bold mt-1">{totalPrograms}</p>
                  <p className="text-xs text-muted-foreground mt-1">
                    {activeRounds} active round{activeRounds !== 1 ? 's' : ''}
                  </p>
                </div>
                <div className="rounded-xl bg-blue-50 p-3">
                  <CheckCircle2 className="h-5 w-5 text-blue-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </AnimatedCard>

        <AnimatedCard index={1}>
          <Card className="border-l-4 border-l-emerald-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
            <CardContent className="p-5">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Total Projects</p>
                  <p className="text-2xl font-bold mt-1">{totalProjects}</p>
                  <p className="text-xs text-muted-foreground mt-1">Across all programs</p>
                </div>
                <div className="rounded-xl bg-emerald-50 p-3">
                  <ClipboardList className="h-5 w-5 text-emerald-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </AnimatedCard>

        <AnimatedCard index={2}>
          <Card className="border-l-4 border-l-violet-500 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
            <CardContent className="p-5">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Jury Members</p>
                  <p className="text-2xl font-bold mt-1">{jurorCount}</p>
                  <p className="text-xs text-muted-foreground mt-1">Active jurors</p>
                </div>
                <div className="rounded-xl bg-violet-50 p-3">
                  <Users className="h-5 w-5 text-violet-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </AnimatedCard>

        <AnimatedCard index={3}>
          <Card className="border-l-4 border-l-brand-teal transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
            <CardContent className="p-5">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Evaluations</p>
                  <p className="text-2xl font-bold mt-1">{submittedEvaluations}</p>
                  <p className="text-xs text-muted-foreground mt-1">
                    {totalAssignments > 0
                      ? `${completionRate}% completion rate`
                      : 'No assignments yet'}
                  </p>
                </div>
                <div className="rounded-xl bg-brand-teal/10 p-3">
                  <BarChart3 className="h-5 w-5 text-brand-teal" />
                </div>
              </div>
            </CardContent>
          </Card>
        </AnimatedCard>
      </div>

      {/* Applicant Nationalities */}
      <ApplicantNationalitiesCard
        data={nationalityStats}
        loading={nationalityLoading}
        scopeLabel={nationalityScopeLabel}
      />

      {/* Score Distribution (if any evaluations exist) */}
      {dashStats?.scoreDistribution && dashStats.scoreDistribution.some(b => b.count > 0) && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <div className="rounded-lg bg-blue-500/10 p-1.5">
                <BarChart3 className="h-4 w-4 text-blue-600" />
              </div>
              Score Distribution
            </CardTitle>
            <CardDescription>Overall score distribution across all evaluations</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {dashStats.scoreDistribution.map((bucket) => {
                const maxCount = Math.max(...dashStats.scoreDistribution.map(b => b.count), 1)
                return (
                  <div key={bucket.label} className="flex items-center gap-3">
                    <span className="w-10 text-sm font-medium text-right">{bucket.label}</span>
                    <div className="flex-1">
                      <Progress value={(bucket.count / maxCount) * 100} className="h-6" gradient />
                    </div>
                    <span className="w-8 text-sm text-muted-foreground text-right">{bucket.count}</span>
                  </div>
                )
              })}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Project Reports Summary */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <div className="rounded-lg bg-emerald-500/10 p-1.5">
                  <ClipboardList className="h-4 w-4 text-emerald-600" />
                </div>
                Project Reports
              </CardTitle>
              <CardDescription>
                {selectedScopeLabel}
              </CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-5">
          {projectsLoading ? (
            <Skeleton className="h-[300px]" />
          ) : projectRankings?.length ? (
            <>
              {/* Summary stats row */}
              {(() => {
                const evaluated = projectRankings.filter(p => p.averageScore !== null)
                const scores = evaluated.map(p => p.averageScore as number)
                const avgScore = scores.length ? scores.reduce((a, b) => a + b, 0) / scores.length : 0
                const balancedScores = projectRankings
                  .map(p => p.balancedScore)
                  .filter((s): s is number => s != null)
                const avgBalanced = balancedScores.length
                  ? balancedScores.reduce((a, b) => a + b, 0) / balancedScores.length
                  : null
                const minScore = scores.length ? Math.min(...scores) : 0
                const maxScore = scores.length ? Math.max(...scores) : 0
                const evalPercent = projectRankings.length ? Math.round((evaluated.length / projectRankings.length) * 100) : 0
                const statusCounts = projectRankings.reduce((acc, p) => {
                  acc[p.status] = (acc[p.status] || 0) + 1
                  return acc
                }, {} as Record<string, number>)

                return (
                  <>
                    <div className="grid grid-cols-2 gap-3 sm:grid-cols-5">
                      <div className="rounded-lg border p-3 text-center">
                        <p className="text-xs text-muted-foreground">Total Projects</p>
                        <p className="text-xl font-bold tabular-nums">{projectRankings.length}</p>
                      </div>
                      <div
                        className="rounded-lg border p-3 text-center"
                        title="Unweighted mean of all submitted juror scores"
                      >
                        <p className="text-xs text-muted-foreground">Raw Avg</p>
                        <p className="text-xl font-bold tabular-nums text-muted-foreground">
                          {avgScore ? avgScore.toFixed(1) : '-'}
                        </p>
                      </div>
                      <div
                        className="rounded-lg border p-3 text-center"
                        title="Juror-balanced average: per-juror z-score normalization rescaled to the 1–10 range"
                      >
                        <p className="text-xs text-muted-foreground">Balanced Avg</p>
                        <p className="text-xl font-bold tabular-nums">
                          {avgBalanced == null ? '-' : avgBalanced.toFixed(1)}
                        </p>
                      </div>
                      <div className="rounded-lg border p-3 text-center">
                        <p className="text-xs text-muted-foreground">Evaluated</p>
                        <p className="text-xl font-bold tabular-nums">{evalPercent}%</p>
                      </div>
                      <div className="rounded-lg border p-3 text-center">
                        <p className="text-xs text-muted-foreground">Score Range</p>
                        <p className="text-xl font-bold tabular-nums">
                          {scores.length ? `${minScore.toFixed(1)}–${maxScore.toFixed(1)}` : '-'}
                        </p>
                      </div>
                    </div>

                    {/* Status breakdown chips */}
                    {Object.keys(statusCounts).length > 0 && (
                      <div className="flex flex-wrap gap-2">
                        {Object.entries(statusCounts)
                          .sort(([, a], [, b]) => b - a)
                          .map(([status, count]) => (
                            <Badge key={status} variant="outline" className="gap-1">
                              <Hash className="h-3 w-3" />
                              {formatStatusLabel(status)} <span className="font-bold tabular-nums">{count}</span>
                            </Badge>
                          ))}
                      </div>
                    )}

                    {/* Top 10 ranked table */}
                    <div>
                      <p className="text-sm font-medium text-muted-foreground mb-2 flex items-center gap-1.5">
                        <Trophy className="h-3.5 w-3.5" /> Top 10 by Balanced Score
                      </p>
                      <div className="rounded-lg border">
                        <Table>
                          <TableHeader>
                            <TableRow>
                              <TableHead className="w-10">#</TableHead>
                              <TableHead>Project</TableHead>
                              <TableHead className="hidden sm:table-cell">Team</TableHead>
                              <TableHead
                                className="text-right"
                                title="Raw average of juror scores — uncorrected for per-juror harshness"
                              >
                                Raw Avg
                              </TableHead>
                              <TableHead
                                className="text-right"
                                title="Juror-balanced average: each juror's contribution is z-score normalized against their own grading distribution, then rescaled to the 1–10 range. Harsh and lenient jurors contribute on equal footing."
                              >
                                Balanced
                              </TableHead>
                              <TableHead className="text-right">Evals</TableHead>
                              <TableHead>Status</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {projectRankings.slice(0, 10).map((p, idx) => (
                              <TableRow key={p.id}>
                                <TableCell className="text-muted-foreground tabular-nums">{idx + 1}</TableCell>
                                <TableCell className="font-medium">
                                  <Link href={`/admin/projects/${p.id}`} className="hover:underline">
                                    {p.title}
                                  </Link>
                                </TableCell>
                                <TableCell className="hidden sm:table-cell text-muted-foreground">
                                  {p.teamName || '-'}
                                </TableCell>
                                <TableCell className="text-right tabular-nums text-muted-foreground">
                                  {p.averageScore === null ? '-' : p.averageScore.toFixed(2)}
                                </TableCell>
                                <TableCell className="text-right tabular-nums font-semibold">
                                  {p.balancedScore == null ? '-' : p.balancedScore.toFixed(2)}
                                </TableCell>
                                <TableCell className="text-right tabular-nums">{p.evaluationCount}</TableCell>
                                <TableCell>
                                  <Badge variant="outline">{formatStatusLabel(p.status)}</Badge>
                                </TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        </Table>
                      </div>
                    </div>

                    {/* Link to full analytics */}
                    {projectRankings.length > 10 && (
                      <div className="flex justify-end">
                        <Button variant="ghost" size="sm" className="gap-1 text-muted-foreground"
                          onClick={() => {
                            const tabs = document.querySelectorAll('[role="tab"]')
                            const analyticsTab = Array.from(tabs).find(t => t.textContent?.includes('Analytics')) as HTMLElement
                            analyticsTab?.click()
                          }}
                        >
                          View full rankings in Analytics <ArrowRight className="h-3.5 w-3.5" />
                        </Button>
                      </div>
                    )}
                  </>
                )
              })()}
            </>
          ) : (
            <div className="flex flex-col items-center justify-center py-10 text-center">
              <ClipboardList className="h-10 w-10 text-muted-foreground/50" />
              <p className="mt-2 text-sm text-muted-foreground">
                No project report data available for the selected scope yet.
              </p>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Round exports (still available) */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <div className="rounded-lg bg-blue-500/10 p-1.5">
              <FileSpreadsheet className="h-4 w-4 text-blue-600" />
            </div>
            Round Exports
          </CardTitle>
          <CardDescription>
            Download round-level evaluations and results
          </CardDescription>
        </CardHeader>
        <CardContent>
          {rounds.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <FileSpreadsheet className="h-10 w-10 text-muted-foreground/50" />
              <p className="mt-2 text-sm text-muted-foreground">
                No rounds created yet.
              </p>
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Round</TableHead>
                  <TableHead>Program</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="text-right">Export</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {rounds.map((round) => (
                  <TableRow key={round.id}>
                    <TableCell>
                      <div>
                        <p className="font-medium">{round.name}</p>
                        {round.votingEndAt && (
                          <p className="text-sm text-muted-foreground">
                            Ends: {formatDateOnly(round.votingEndAt)}
                          </p>
                        )}
                      </div>
                    </TableCell>
                    <TableCell>{round.programName}</TableCell>
                    <TableCell>
                      <Badge
                        variant={
                          round.status === 'ROUND_ACTIVE'
                            ? 'default'
                            : round.status === 'ROUND_CLOSED'
                              ? 'secondary'
                              : 'outline'
                        }
                      >
                        {round.status?.replace('ROUND_', '') || round.status}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2 flex-wrap">
                        <Button variant="outline" size="sm" asChild>
                          <a
                            href={`/api/export/evaluations?stageId=${round.id}`}
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            <Download className="mr-2 h-4 w-4" />
                            Evaluations
                          </a>
                        </Button>
                        <Button variant="outline" size="sm" asChild>
                          <a
                            href={`/api/export/results?stageId=${round.id}`}
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            <Download className="mr-2 h-4 w-4" />
                            Results
                          </a>
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

type NationalityStats = {
  total: number
  declared: number
  notDeclared: number
  byCountry: Array<{ country: string; count: number }>
}

function ApplicantNationalitiesCard({
  data,
  loading,
  scopeLabel,
}: {
  data: NationalityStats | undefined
  loading: boolean
  scopeLabel: string
}) {
  const [showAll, setShowAll] = useState(false)

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <div className="rounded-lg bg-violet-500/10 p-1.5">
            <Globe className="h-4 w-4 text-violet-600" />
          </div>
          Applicant Nationalities
        </CardTitle>
        <CardDescription>
          Self-declared nationality of team members on projects {scopeLabel}.
        </CardDescription>
      </CardHeader>
      <CardContent>
        {loading ? (
          <div className="space-y-3">
            <Skeleton className="h-12 w-full" />
            <Skeleton className="h-64 w-full" />
          </div>
        ) : !data || data.total === 0 ? (
          <div className="flex flex-col items-center justify-center py-8 text-center">
            <Globe className="h-10 w-10 text-muted-foreground/50" />
            <p className="mt-2 text-sm text-muted-foreground">
              No applicants in this scope.
            </p>
          </div>
        ) : data.declared === 0 ? (
          <>
            <NationalitySummary declared={data.declared} notDeclared={data.notDeclared} />
            <div className="mt-4 flex flex-col items-center justify-center rounded-lg border border-dashed py-8 text-center">
              <Globe className="h-8 w-8 text-muted-foreground/50" />
              <p className="mt-2 text-sm text-muted-foreground">
                No nationality data yet.
              </p>
            </div>
          </>
        ) : (
          <>
            <NationalitySummary declared={data.declared} notDeclared={data.notDeclared} />

            <div className="mt-4 rounded-lg border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Country</TableHead>
                    <TableHead className="text-right w-32">Applicants</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {(showAll ? data.byCountry : data.byCountry.slice(0, 10)).map((row) => {
                    const name = getCountryName(row.country)
                    const flag = getCountryFlag(row.country)
                    return (
                      <TableRow key={row.country}>
                        <TableCell className="font-medium">
                          <span className="inline-flex items-center gap-2">
                            {flag && <span aria-hidden>{flag}</span>}
                            <span>{name}</span>
                            {name !== row.country && (
                              <span className="text-xs text-muted-foreground tabular-nums">
                                {row.country}
                              </span>
                            )}
                          </span>
                        </TableCell>
                        <TableCell className="text-right">
                          <Badge variant="secondary" className="tabular-nums">
                            {row.count}
                          </Badge>
                        </TableCell>
                      </TableRow>
                    )
                  })}
                </TableBody>
              </Table>
            </div>

            {data.byCountry.length > 10 && (
              <div className="mt-3 flex justify-end">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setShowAll((v) => !v)}
                  className="gap-1 text-muted-foreground"
                >
                  {showAll
                    ? 'Show top 10'
                    : `Show all (${data.byCountry.length} countries)`}
                  <ArrowRight className="h-3.5 w-3.5" />
                </Button>
              </div>
            )}
          </>
        )}
      </CardContent>
    </Card>
  )
}

function NationalitySummary({ declared, notDeclared }: { declared: number; notDeclared: number }) {
  return (
    <div className="grid grid-cols-2 gap-3">
      <div className="rounded-lg border p-3 text-center">
        <p className="text-xs text-muted-foreground">Declared</p>
        <p className="text-2xl font-bold tabular-nums">{declared}</p>
      </div>
      <div className="rounded-lg border p-3 text-center">
        <p className="text-xs text-muted-foreground">Not declared</p>
        <p className="text-2xl font-bold tabular-nums text-muted-foreground">
          {notDeclared}
        </p>
      </div>
    </div>
  )
}

// Parse selection value: "all:programId" for edition-wide, or roundId
function parseSelection(value: string | null): { roundId?: string; programId?: string } {
  if (!value) return {}
  if (value.startsWith('all:')) return { programId: value.slice(4) }
  return { roundId: value }
}

// Map raw DB status to display-friendly labels
function formatStatusLabel(status: string): string {
  const labels: Record<string, string> = {
    ELIGIBLE: 'Special Award',
    ASSIGNED: 'Assigned',
    PENDING: 'Pending',
    IN_PROGRESS: 'In Progress',
    PASSED: 'Passed',
    REJECTED: 'Rejected',
    COMPLETED: 'Completed',
    WITHDRAWN: 'Withdrawn',
  }
  return labels[status] ?? status
}

// Find the best default round: active > last closed > first
function findDefaultRound(rounds: Array<{ id: string; status?: string }>): string | undefined {
  const active = rounds.find(r => r.status === 'ROUND_ACTIVE')
  if (active) return active.id
  const closed = [...rounds].reverse().find(r => r.status === 'ROUND_CLOSED')
  if (closed) return closed.id
  return rounds[0]?.id
}

function StageAnalytics({ scope }: { scope: string | null }) {
  const { data: programs, isLoading: roundsLoading } = trpc.program.list.useQuery({ includeStages: true })

  // Flatten stages from all programs with program name
  const rounds = programs?.flatMap(p =>
    ((p.stages ?? []) as Array<{ id: string; name: string; status: string }>).map((s: { id: string; name: string; status: string }) => ({ ...s, programId: p.id, programName: `${p.year} Edition` }))
  ) || []

  const queryInput = parseSelection(scope)
  const hasSelection = !!queryInput.roundId || !!queryInput.programId

  const { data: scoreDistribution, isLoading: scoreLoading } =
    trpc.analytics.getScoreDistribution.useQuery(
      queryInput,
      { enabled: hasSelection }
    )

  const { data: timeline, isLoading: timelineLoading } =
    trpc.analytics.getEvaluationTimeline.useQuery(
      queryInput,
      { enabled: hasSelection }
    )

  const { data: statusBreakdown, isLoading: statusLoading } =
    trpc.analytics.getStatusBreakdown.useQuery(
      queryInput,
      { enabled: hasSelection }
    )

  const { data: jurorWorkload, isLoading: workloadLoading } =
    trpc.analytics.getJurorWorkload.useQuery(
      queryInput,
      { enabled: hasSelection }
    )

  const { data: projectRankings, isLoading: rankingsLoading } =
    trpc.analytics.getProjectRankings.useQuery(
      { ...queryInput, limit: 15 },
      { enabled: hasSelection }
    )

  const { data: criteriaScores, isLoading: criteriaLoading } =
    trpc.analytics.getCriteriaScores.useQuery(
      queryInput,
      { enabled: hasSelection }
    )

  const selectedRound = rounds.find((r) => r.id === scope)
  const geoInput = queryInput.programId
    ? { programId: queryInput.programId }
    : { programId: selectedRound?.programId || '', roundId: queryInput.roundId }
  const { data: geoData, isLoading: geoLoading } =
    trpc.analytics.getGeographicDistribution.useQuery(
      geoInput,
      { enabled: hasSelection && !!(geoInput.programId || geoInput.roundId) }
    )

  if (roundsLoading) {
    return (
      <div className="space-y-4">
        <Skeleton className="h-10 w-64" />
        <div className="grid gap-6 lg:grid-cols-2">
          <Skeleton className="h-[350px]" />
          <Skeleton className="h-[350px]" />
        </div>
      </div>
    )
  }

  if (!rounds?.length) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
          <BarChart3 className="h-12 w-12 text-muted-foreground/50" />
          <p className="mt-2 font-medium">No rounds available</p>
          <p className="text-sm text-muted-foreground">
            Create a round to view analytics
          </p>
        </CardContent>
      </Card>
    )
  }

  return (
    <div className="space-y-6">
      {hasSelection && (
        <div className="space-y-6">
          {/* Row 1: Score Distribution & Status Breakdown */}
          <div className="grid gap-6 lg:grid-cols-2">
            {scoreLoading ? (
              <Skeleton className="h-[350px]" />
            ) : scoreDistribution ? (
              <ScoreDistributionChart
                data={scoreDistribution.distribution ?? []}
                averageScore={scoreDistribution.averageScore ?? 0}
                totalScores={scoreDistribution.totalScores ?? 0}
              />
            ) : null}

            {statusLoading ? (
              <Skeleton className="h-[350px]" />
            ) : statusBreakdown ? (
              <StatusBreakdownChart data={statusBreakdown} />
            ) : null}
          </div>

          {/* Row 2: Evaluation Timeline */}
          {timelineLoading ? (
            <Skeleton className="h-[350px]" />
          ) : timeline?.length ? (
            <EvaluationTimelineChart data={timeline} />
          ) : (
            <Card>
              <CardContent className="flex items-center justify-center py-12">
                <p className="text-muted-foreground">
                  No evaluation data available yet
                </p>
              </CardContent>
            </Card>
          )}

          {/* Row 3: Criteria Scores */}
          {criteriaLoading ? (
            <Skeleton className="h-[350px]" />
          ) : criteriaScores?.length ? (
            <CriteriaScoresChart data={criteriaScores} />
          ) : null}

          {/* Row 4: Juror Workload */}
          {workloadLoading ? (
            <Skeleton className="h-[450px]" />
          ) : jurorWorkload?.length ? (
            <JurorWorkloadChart data={jurorWorkload} />
          ) : (
            <Card>
              <CardContent className="flex items-center justify-center py-12">
                <p className="text-muted-foreground">
                  No juror assignments yet
                </p>
              </CardContent>
            </Card>
          )}

          {/* Row 5: Project Rankings */}
          {rankingsLoading ? (
            <Skeleton className="h-[550px]" />
          ) : projectRankings?.length ? (
            <ProjectRankingsChart data={projectRankings} limit={15} />
          ) : (
            <Card>
              <CardContent className="flex items-center justify-center py-12">
                <p className="text-muted-foreground">
                  No project scores available yet
                </p>
              </CardContent>
            </Card>
          )}

          {/* Row 6: Geographic Distribution */}
          {geoLoading ? (
            <Skeleton className="h-[500px]" />
          ) : geoData?.length ? (
            <GeographicDistribution data={geoData} />
          ) : null}
        </div>
      )}
    </div>
  )
}

function CrossStageTab() {
  const { data: programs, isLoading: programsLoading } = trpc.program.list.useQuery({ includeStages: true })

  const stages = programs?.flatMap((p) =>
    ((p.stages ?? []) as Array<{ id: string; name: string }>).map((s: { id: string; name: string }) => ({ id: s.id, name: s.name, programName: `${p.year} Edition` }))
  ) || []

  const [selectedRoundIds, setSelectedRoundIds] = useState<string[]>([])

  const { data: comparison, isLoading: comparisonLoading } =
    trpc.analytics.getCrossRoundComparison.useQuery(
      { roundIds: selectedRoundIds },
      { enabled: selectedRoundIds.length >= 2 }
    )

  const toggleRound = (roundId: string) => {
    setSelectedRoundIds((prev) =>
      prev.includes(roundId)
        ? prev.filter((id) => id !== roundId)
        : [...prev, roundId]
    )
  }

  if (programsLoading) {
    return <Skeleton className="h-[400px]" />
  }

  return (
    <div className="space-y-6">
      {/* Stage selector */}
      <Card>
        <CardHeader>
          <CardTitle>Select Stages to Compare</CardTitle>
          <CardDescription>
            Choose at least 2 stages to compare metrics side by side
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-2">
            {stages.map((stage) => {
              const isSelected = selectedRoundIds.includes(stage.id)
              return (
                <Badge
                  key={stage.id}
                  variant={isSelected ? 'default' : 'outline'}
                  className="cursor-pointer text-sm py-1.5 px-3"
                  onClick={() => toggleRound(stage.id)}
                >
                  {stage.name}
                </Badge>
              )
            })}
          </div>
          {selectedRoundIds.length < 2 && (
            <p className="text-sm text-muted-foreground mt-3">
              Select at least 2 stages to enable comparison
            </p>
          )}
        </CardContent>
      </Card>

      {/* Comparison charts */}
      {comparisonLoading && selectedRoundIds.length >= 2 && (
        <div className="space-y-6">
          <Skeleton className="h-[350px]" />
          <div className="grid gap-6 lg:grid-cols-2">
            <Skeleton className="h-[300px]" />
            <Skeleton className="h-[300px]" />
          </div>
        </div>
      )}

      {comparison && (
        <CrossStageComparisonChart data={comparison as Array<{
          roundId: string
          roundName: string
          projectCount: number
          evaluationCount: number
          completionRate: number
          averageScore: number | null
          scoreDistribution: { score: number; count: number }[]
        }>} />
      )}
    </div>
  )
}

function JurorConsistencyTab({ scope }: { scope: string | null }) {
  const { isLoading: programsLoading } = trpc.program.list.useQuery({ includeStages: true })

  const queryInput = parseSelection(scope)
  const hasSelection = !!queryInput.roundId || !!queryInput.programId

  const { data: consistency, isLoading: consistencyLoading } =
    trpc.analytics.getJurorConsistency.useQuery(
      queryInput,
      { enabled: hasSelection }
    )

  if (programsLoading) {
    return <Skeleton className="h-[400px]" />
  }

  return (
    <div className="space-y-6">
      {consistencyLoading && <Skeleton className="h-[400px]" />}

      {consistency && (
        <JurorConsistencyChart
          data={consistency as {
            overallAverage: number
            jurors: Array<{
              userId: string
              name: string
              email: string
              evaluationCount: number
              averageScore: number
              stddev: number
              deviationFromOverall: number
              isOutlier: boolean
            }>
          }}
        />
      )}

      {queryInput.roundId && (
        <JurorCalibrationPanel roundId={queryInput.roundId} />
      )}
    </div>
  )
}

function JurorCalibrationPanel({ roundId }: { roundId: string }) {
  const mutation = trpc.analytics.generateJurorCalibration.useMutation({
    onError: (err) => toast.error(`Calibration analysis failed: ${err.message}`),
  })
  const result = mutation.data

  const severityStyle: Record<string, string> = {
    outlier: 'bg-red-50 text-red-700 border-red-200',
    notable: 'bg-amber-50 text-amber-700 border-amber-200',
    normal: 'bg-muted text-muted-foreground',
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div>
            <CardTitle className="flex items-center gap-2">
              <Sparkles className="h-5 w-5 text-[#de0f1e]" />
              AI Juror Calibration Advisory
            </CardTitle>
            <CardDescription>
              Plain-language explanation of the per-juror score balancing already applied to rankings.
              Describes, does not prescribe — the math runs regardless.
            </CardDescription>
          </div>
          <Button
            onClick={() => mutation.mutate({ roundId })}
            disabled={mutation.isPending}
            className="gap-2"
          >
            {mutation.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4" />}
            {mutation.isPending ? 'Analyzing…' : result ? 'Regenerate' : 'Analyze jurors'}
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-5">
        {!result && !mutation.isPending && (
          <p className="text-sm text-muted-foreground">
            Run the analysis to see per-juror grading patterns, cohort stats, and the calibration
            narrative for the selected round.
          </p>
        )}

        {result && (
          <>
            <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
              <div className="rounded-lg border p-3 text-center">
                <p className="text-xs text-muted-foreground">Cohort Mean</p>
                <p className="text-xl font-bold tabular-nums">{result.cohortMean.toFixed(2)}</p>
              </div>
              <div className="rounded-lg border p-3 text-center">
                <p className="text-xs text-muted-foreground">Cohort Stddev</p>
                <p className="text-xl font-bold tabular-nums">{result.cohortStddev.toFixed(2)}</p>
              </div>
              <div className="rounded-lg border p-3 text-center">
                <p className="text-xs text-muted-foreground">Evaluations</p>
                <p className="text-xl font-bold tabular-nums">{result.totalEvaluations}</p>
              </div>
              <div className="rounded-lg border p-3 text-center">
                <p className="text-xs text-muted-foreground">Jurors</p>
                <p className="text-xl font-bold tabular-nums">{result.totalJurors}</p>
              </div>
            </div>

            <div className="rounded-lg border bg-muted/30 p-4">
              <p className="text-sm leading-relaxed">{result.overallSummary}</p>
              {result.keyTakeaways.length > 0 && (
                <ul className="mt-3 space-y-1.5 text-sm">
                  {result.keyTakeaways.map((t, i) => (
                    <li key={i} className="flex items-start gap-2">
                      <ArrowRight className="mt-1 h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
                      <span>{t}</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>

            <div className="rounded-lg border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Juror</TableHead>
                    <TableHead className="text-right">Evals</TableHead>
                    <TableHead className="text-right">Mean</TableHead>
                    <TableHead className="text-right">Δ Cohort</TableHead>
                    <TableHead className="text-right" title="Juror's stddev / cohort stddev">
                      Influence
                    </TableHead>
                    <TableHead>Severity</TableHead>
                    <TableHead>Notes</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {result.jurors.map((j) => (
                    <TableRow key={j.userId}>
                      <TableCell className="font-medium">{j.name}</TableCell>
                      <TableCell className="text-right tabular-nums">{j.evaluationCount}</TableCell>
                      <TableCell className="text-right tabular-nums">{j.rawMean.toFixed(2)}</TableCell>
                      <TableCell
                        className={`text-right tabular-nums ${
                          j.deltaFromCohort < -0.5 ? 'text-red-600' : j.deltaFromCohort > 0.5 ? 'text-emerald-600' : ''
                        }`}
                      >
                        {j.deltaFromCohort > 0 ? '+' : ''}
                        {j.deltaFromCohort.toFixed(2)}
                      </TableCell>
                      <TableCell className="text-right tabular-nums">
                        {j.effectiveInfluence == null ? '-' : j.effectiveInfluence.toFixed(2)}
                      </TableCell>
                      <TableCell>
                        <Badge variant="outline" className={severityStyle[j.severity]}>
                          {j.severity === 'outlier' && <AlertTriangle className="mr-1 h-3 w-3" />}
                          {j.severity}
                        </Badge>
                      </TableCell>
                      <TableCell className="max-w-md text-sm text-muted-foreground">
                        {j.summary}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>

            <p className="text-xs text-muted-foreground">
              Generated {result.generatedAt.toLocaleString()} · {result.tokensUsed} tokens · model {result.model}
            </p>
          </>
        )}
      </CardContent>
    </Card>
  )
}

function DiversityTab({ scope }: { scope: string | null }) {
  const { isLoading: programsLoading } = trpc.program.list.useQuery({ includeStages: true })

  const queryInput = parseSelection(scope)
  const hasSelection = !!queryInput.roundId || !!queryInput.programId

  const { data: diversity, isLoading: diversityLoading } =
    trpc.analytics.getDiversityMetrics.useQuery(
      queryInput,
      { enabled: hasSelection }
    )

  if (programsLoading) {
    return <Skeleton className="h-[400px]" />
  }

  return (
    <div className="space-y-6">
      {diversityLoading && <Skeleton className="h-[400px]" />}

      {diversity && (
        <DiversityMetricsChart
          data={diversity as {
            total: number
            byCountry: { country: string; count: number; percentage: number }[]
            byCategory: { category: string; count: number; percentage: number }[]
            byOceanIssue: { issue: string; count: number; percentage: number }[]
            byTag: { tag: string; count: number; percentage: number }[]
          }}
        />
      )}
    </div>
  )
}

function RoundPipelineTab({ scope }: { scope: string | null }) {
  const { data: programs, isLoading } = trpc.program.list.useQuery({ includeStages: true })

  const allRounds = programs?.flatMap(p =>
    ((p.stages ?? []) as Array<{ id: string; name: string; status: string; type?: string }>).map((s) => ({
      ...s,
      programId: p.id,
      programName: `${p.year} Edition`,
    }))
  ) || []

  // Pipeline is inherently multi-round. Narrow to the selected program if one
  // is picked (either via "all:programId" or a specific round whose program we
  // can resolve). Otherwise show every round across every program.
  const scopeProgramId = scope?.startsWith('all:')
    ? scope.slice(4)
    : allRounds.find((r) => r.id === scope)?.programId
  const rounds = scopeProgramId
    ? allRounds.filter((r) => r.programId === scopeProgramId)
    : allRounds

  const roundIds = rounds.map(r => r.id)

  const { data: comparison, isLoading: comparisonLoading } =
    trpc.analytics.getCrossRoundComparison.useQuery(
      { roundIds },
      { enabled: roundIds.length >= 2 }
    )

  if (isLoading || comparisonLoading) {
    return (
      <div className="space-y-4">
        {[1, 2, 3].map(i => <Skeleton key={i} className="h-24" />)}
      </div>
    )
  }

  if (!rounds.length) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
          <Layers className="h-12 w-12 text-muted-foreground/50" />
          <p className="mt-2 font-medium">No rounds available</p>
        </CardContent>
      </Card>
    )
  }

  const comparisonMap = new Map(
    (comparison ?? []).map((c: any) => [c.roundId, c])
  )

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <div className="rounded-lg bg-violet-500/10 p-1.5">
              <Layers className="h-4 w-4 text-violet-600" />
            </div>
            Round Pipeline
          </CardTitle>
          <CardDescription>Project flow across competition rounds</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {rounds.map((round, idx) => {
              const stats = comparisonMap.get(round.id) as any
              const isClosed = round.status === 'ROUND_CLOSED' || round.status === 'ROUND_ARCHIVED'
              const progressValue = isClosed ? 100 : (stats?.completionRate ?? 0)
              return (
                <div key={round.id} className="flex items-center gap-4">
                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-medium">
                    {idx + 1}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">{round.name}</p>
                        <p className="text-xs text-muted-foreground">{round.programName}</p>
                      </div>
                      <div className="flex items-center gap-4 text-sm">
                        <span className="tabular-nums">{stats?.projectCount ?? 0} projects</span>
                        <span className="tabular-nums">{stats?.evaluationCount ?? 0} evals</span>
                        <Badge variant={round.status === 'ROUND_ACTIVE' ? 'default' : isClosed ? 'secondary' : 'outline'}>
                          {round.status?.replace('ROUND_', '') ?? 'DRAFT'}
                        </Badge>
                      </div>
                    </div>
                    <Progress value={progressValue} className="mt-2 h-2" />
                  </div>
                </div>
              )
            })}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default function ReportsPage() {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const urlRound = searchParams.get('round')

  const { data: programs } = trpc.program.list.useQuery({ includeStages: true })

  const stages = useMemo(
    () => programs?.flatMap((p) =>
      ((p.stages ?? []) as Array<{ id: string; name: string; status: string }>).map(
        (s: { id: string; name: string; status: string }) => ({
          id: s.id,
          name: s.name,
          status: s.status,
          programId: p.id,
          programName: `${p.year} Edition`,
        }),
      ),
    ) || [],
    [programs],
  )

  const [pdfStageId, setPdfStageId] = useState<string | null>(null)
  useEffect(() => {
    if (stages.length && !pdfStageId) {
      setPdfStageId(findDefaultRound(stages) ?? stages[0].id)
    }
  }, [stages.length, pdfStageId, stages])

  // Top-level selection drives every single-round tab. Persisted to the URL
  // so reloads and shared links preserve the view. Defaults to the newest
  // program's "All Rounds" entry.
  const defaultScope = programs?.length ? `all:${programs[0].id}` : null
  const scope = urlRound ?? defaultScope

  const setScope = (value: string) => {
    const params = new URLSearchParams(searchParams.toString())
    params.set('round', value)
    router.replace(`${pathname}?${params.toString()}`, { scroll: false })
  }

  const selectedPdfStage = stages.find((r) => r.id === pdfStageId)

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">Reports</h1>
        <p className="text-muted-foreground">
          View progress, analytics, and export evaluation data
        </p>
      </div>

      {/* Top-level round selector — drives every tab below */}
      <Card>
        <CardContent className="p-4">
          <div className="flex flex-wrap items-center gap-3">
            <label className="text-sm font-medium">Viewing:</label>
            <Select value={scope ?? ''} onValueChange={setScope}>
              <SelectTrigger className="w-[320px]">
                <SelectValue placeholder="Select a round or edition" />
              </SelectTrigger>
              <SelectContent>
                {programs?.map((p) => (
                  <SelectItem key={`all:${p.id}`} value={`all:${p.id}`}>
                    {p.year} Edition — All Rounds
                  </SelectItem>
                ))}
                {stages.map((stage) => (
                  <SelectItem key={stage.id} value={stage.id}>
                    {stage.programName} — {stage.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <p className="text-xs text-muted-foreground">
              This selection applies to every tab except Cross-Round (which compares multiple rounds).
            </p>
          </div>
        </CardContent>
      </Card>

      {/* Tabs */}
      <Tabs defaultValue="overview" className="space-y-6">
        <div className="flex items-center justify-between flex-wrap gap-4">
          <TabsList className="w-full sm:w-auto flex-wrap justify-start overflow-x-auto scrollbar-hide">
            <TabsTrigger value="overview" className="gap-2">
              <FileSpreadsheet className="h-4 w-4" />
              Overview
            </TabsTrigger>
            <TabsTrigger value="analytics" className="gap-2">
              <TrendingUp className="h-4 w-4" />
              Analytics
            </TabsTrigger>
            <TabsTrigger value="cross-stage" className="gap-2">
              <GitCompare className="h-4 w-4" />
              Cross-Round
            </TabsTrigger>
            <TabsTrigger value="consistency" className="gap-2">
              <UserCheck className="h-4 w-4" />
              Juror Consistency
            </TabsTrigger>
            <TabsTrigger value="diversity" className="gap-2">
              <Globe className="h-4 w-4" />
              Diversity
            </TabsTrigger>
            <TabsTrigger value="pipeline" className="gap-2">
              <Layers className="h-4 w-4" />
              By Round
            </TabsTrigger>
          </TabsList>
          <div className="flex items-center gap-2 w-full sm:w-auto justify-between sm:justify-end">
            <Select value={pdfStageId || ''} onValueChange={setPdfStageId}>
              <SelectTrigger className="w-[220px]">
                <SelectValue placeholder="Select stage for PDF" />
              </SelectTrigger>
              <SelectContent>
                {stages.map((stage) => (
                  <SelectItem key={stage.id} value={stage.id}>
                    {stage.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            {pdfStageId && (
              <ExportPdfButton
                roundId={pdfStageId}
                roundName={selectedPdfStage?.name}
                programName={selectedPdfStage?.programName}
              />
            )}
          </div>
        </div>

        <TabsContent value="overview">
          <ReportsOverview scope={scope} />
        </TabsContent>

        <TabsContent value="analytics">
          <StageAnalytics scope={scope} />
        </TabsContent>

        <TabsContent value="cross-stage">
          <CrossStageTab />
        </TabsContent>

        <TabsContent value="consistency">
          <JurorConsistencyTab scope={scope} />
        </TabsContent>

        <TabsContent value="diversity">
          <DiversityTab scope={scope} />
        </TabsContent>

        <TabsContent value="pipeline">
          <RoundPipelineTab scope={scope} />
        </TabsContent>
      </Tabs>
    </div>
  )
}
