'use client'

import { use } from 'react'
import { trpc } from '@/lib/trpc/client'
import { Badge } from '@/components/ui/badge'
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { Progress } from '@/components/ui/progress'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Trophy, Star, Clock, AlertCircle, Zap } from 'lucide-react'

interface PageProps {
  params: Promise<{ sessionId: string }>
}

function PublicScoresContent({ sessionId }: { sessionId: string }) {
  // Fetch session data with polling
  const { data, isLoading } = trpc.liveVoting.getPublicSession.useQuery(
    { sessionId },
    { refetchInterval: 2000 } // Poll every 2 seconds
  )

  if (isLoading) {
    return <PublicScoresSkeleton />
  }

  if (!data) {
    return (
      <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-[#053d57] to-[#557f8c]">
        <Alert variant="destructive" className="max-w-md">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Session Not Found</AlertTitle>
          <AlertDescription>
            This voting session does not exist.
          </AlertDescription>
        </Alert>
      </div>
    )
  }

  const isCompleted = data.session.status === 'COMPLETED'
  const isVoting = data.session.status === 'IN_PROGRESS'

  // Sort projects by score for leaderboard
  const sortedProjects = [...data.projects].sort(
    (a, b) => (b.averageScore || 0) - (a.averageScore || 0)
  )

  // Find max score for progress bars
  const maxScore = Math.max(...data.projects.map((p) => p.averageScore || 0), 1)

  return (
    <div className="min-h-screen bg-gradient-to-br from-[#053d57] to-[#557f8c] p-4 md:p-8">
      <div className="max-w-4xl mx-auto space-y-6">
        {/* Header */}
        <div className="text-center text-white">
          <div className="flex items-center justify-center gap-2 mb-2">
            <Zap className="h-8 w-8" />
            <h1 className="text-3xl font-bold">Live Scores</h1>
          </div>
          <p className="text-white/80">
            {data.round.program.name} - {data.round.name}
          </p>
          <Badge
            variant={isVoting ? 'default' : isCompleted ? 'secondary' : 'outline'}
            className="mt-2"
          >
            {isVoting ? 'LIVE' : isCompleted ? 'COMPLETED' : data.session.status}
          </Badge>
        </div>

        {/* Current project highlight */}
        {isVoting && data.session.currentProjectId && (
          <Card className="border-2 border-green-500 bg-green-500/10 animate-pulse">
            <CardHeader className="pb-2">
              <div className="flex items-center gap-2 text-green-400">
                <Clock className="h-5 w-5" />
                <span className="font-medium">Now Voting</span>
              </div>
            </CardHeader>
            <CardContent>
              <p className="text-xl font-semibold text-white">
                {data.projects.find((p) => p?.id === data.session.currentProjectId)?.title}
              </p>
            </CardContent>
          </Card>
        )}

        {/* Leaderboard */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Trophy className="h-5 w-5 text-yellow-500" />
              Rankings
            </CardTitle>
          </CardHeader>
          <CardContent>
            {sortedProjects.length === 0 ? (
              <p className="text-muted-foreground text-center py-8">
                No scores yet
              </p>
            ) : (
              <div className="space-y-4">
                {sortedProjects.map((project, index) => {
                  if (!project) return null
                  const isCurrent = project.id === data.session.currentProjectId

                  return (
                    <div
                      key={project.id}
                      className={`rounded-lg p-4 ${
                        isCurrent
                          ? 'bg-green-500/10 border border-green-500'
                          : 'bg-muted/50'
                      }`}
                    >
                      <div className="flex items-center gap-4">
                        {/* Rank */}
                        <div className="shrink-0 w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
                          {index === 0 ? (
                            <Trophy className="h-4 w-4 text-yellow-500" />
                          ) : index === 1 ? (
                            <span className="font-bold text-gray-400">2</span>
                          ) : index === 2 ? (
                            <span className="font-bold text-amber-600">3</span>
                          ) : (
                            <span className="font-bold text-muted-foreground">
                              {index + 1}
                            </span>
                          )}
                        </div>

                        {/* Project info */}
                        <div className="flex-1 min-w-0">
                          <p className="font-medium truncate">{project.title}</p>
                          {project.teamName && (
                            <p className="text-sm text-muted-foreground truncate">
                              {project.teamName}
                            </p>
                          )}
                        </div>

                        {/* Score */}
                        <div className="shrink-0 text-right">
                          <div className="flex items-center gap-1">
                            <Star className="h-4 w-4 text-yellow-500" />
                            <span className="text-xl font-bold">
                              {project.averageScore?.toFixed(1) || '--'}
                            </span>
                          </div>
                          <p className="text-xs text-muted-foreground">
                            {project.voteCount} votes
                          </p>
                        </div>
                      </div>

                      {/* Score bar */}
                      <div className="mt-3">
                        <Progress
                          value={
                            project.averageScore
                              ? (project.averageScore / maxScore) * 100
                              : 0
                          }
                          className="h-2"
                        />
                      </div>
                    </div>
                  )
                })}
              </div>
            )}
          </CardContent>
        </Card>

        {/* Footer */}
        <p className="text-center text-white/60 text-sm">
          Scores update in real-time
        </p>
      </div>
    </div>
  )
}

function PublicScoresSkeleton() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-[#053d57] to-[#557f8c] p-4 md:p-8">
      <div className="max-w-4xl mx-auto space-y-6">
        <div className="text-center">
          <Skeleton className="h-10 w-48 mx-auto" />
          <Skeleton className="h-4 w-64 mx-auto mt-2" />
        </div>
        <Card>
          <CardHeader>
            <Skeleton className="h-6 w-32" />
          </CardHeader>
          <CardContent className="space-y-4">
            {[1, 2, 3, 4, 5].map((i) => (
              <Skeleton key={i} className="h-20 w-full" />
            ))}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export default function PublicScoresPage({ params }: PageProps) {
  const { sessionId } = use(params)

  return <PublicScoresContent sessionId={sessionId} />
}
