'use client'

import { use, useCallback, useState } 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, Wifi, WifiOff } from 'lucide-react'
import { useLiveVotingSSE, type VoteUpdate } from '@/hooks/use-live-voting-sse'

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

interface PublicSession {
  id: string
  status: string
  currentProjectId: string | null
  votingEndsAt: string | null
  presentationSettings: Record<string, unknown> | null
  allowAudienceVotes: boolean
}

interface PublicProject {
  id: string | undefined
  title: string | undefined
  teamName: string | null | undefined
  averageScore: number
  voteCount: number
}

function PublicScoresContent({ sessionId }: { sessionId: string }) {
  // Track SSE-based score updates keyed by projectId
  const [liveScores, setLiveScores] = useState<Record<string, { avg: number; count: number }>>({})

  // Use public (no-auth) endpoint with reduced polling since SSE handles real-time
  const { data, isLoading, refetch } = trpc.liveVoting.getPublicResults.useQuery(
    { sessionId },
    { refetchInterval: 10000 }
  )

  // SSE for real-time updates
  const onVoteUpdate = useCallback((update: VoteUpdate) => {
    setLiveScores((prev) => ({
      ...prev,
      [update.projectId]: {
        avg: update.averageScore ?? 0,
        count: update.totalVotes,
      },
    }))
  }, [])

  const onSessionStatus = useCallback(() => {
    refetch()
  }, [refetch])

  const onProjectChange = useCallback(() => {
    refetch()
  }, [refetch])

  const { isConnected } = useLiveVotingSSE(sessionId, {
    onVoteUpdate,
    onSessionStatus,
    onProjectChange,
  })

  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 session = data.session as PublicSession
  const projects = data.projects as PublicProject[]

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

  // Merge live SSE scores with fetched data
  const projectsWithLive = projects.map((project) => {
    const live = project.id ? liveScores[project.id] : null
    return {
      ...project,
      averageScore: live ? live.avg : (project.averageScore || 0),
      voteCount: live ? live.count : (project.voteCount || 0),
    }
  })

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

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

  // Get presentation settings
  const presentationSettings = session.presentationSettings

  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>
            {isConnected ? (
              <Wifi className="h-4 w-4 text-green-400" />
            ) : (
              <WifiOff className="h-4 w-4 text-red-400" />
            )}
          </div>
          <Badge
            variant={isVoting ? 'default' : isCompleted ? 'secondary' : 'outline'}
            className="mt-2"
          >
            {isVoting ? 'LIVE' : isCompleted ? 'COMPLETED' : session.status}
          </Badge>
        </div>

        {/* Current project highlight */}
        {isVoting && 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">
                {projects.find((p) => p?.id === 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 === session.currentProjectId
                  const scoreFormat = presentationSettings?.scoreDisplayFormat as string || 'bar'

                  return (
                    <div
                      key={project.id}
                      className={`rounded-lg p-4 transition-all duration-300 ${
                        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">
                          {scoreFormat === 'radial' ? (
                            <div className="relative w-14 h-14">
                              <svg viewBox="0 0 36 36" className="w-14 h-14 -rotate-90">
                                <path
                                  d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                                  fill="none"
                                  stroke="currentColor"
                                  strokeWidth="2"
                                  className="text-muted/30"
                                />
                                <path
                                  d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                                  fill="none"
                                  stroke="currentColor"
                                  strokeWidth="2.5"
                                  strokeDasharray={`${((project.averageScore || 0) / 10) * 100}, 100`}
                                  className="text-primary"
                                />
                              </svg>
                              <span className="absolute inset-0 flex items-center justify-center text-sm font-bold">
                                {project.averageScore?.toFixed(1) || '--'}
                              </span>
                            </div>
                          ) : (
                            <>
                              <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 - shown for 'bar' format */}
                      {scoreFormat !== 'number' && scoreFormat !== 'radial' && (
                        <div className="mt-3">
                          <Progress
                            value={
                              project.averageScore
                                ? (project.averageScore / maxScore) * 100
                                : 0
                            }
                            className="h-2"
                          />
                        </div>
                      )}
                    </div>
                  )
                })}
              </div>
            )}
          </CardContent>
        </Card>

        {/* Audience voting info */}
        {session.allowAudienceVotes && isVoting && (
          <Card className="border-primary/30 bg-primary/5">
            <CardContent className="py-4 text-center">
              <p className="text-sm font-medium">
                Audience voting is enabled for this session
              </p>
            </CardContent>
          </Card>
        )}

        {/* Footer */}
        <div className="flex items-center justify-center gap-2">
          {isConnected ? (
            <Wifi className="h-3 w-3 text-green-400" />
          ) : (
            <WifiOff className="h-3 w-3 text-red-400" />
          )}
          <p className="text-center text-white/60 text-sm">
            Scores update in real-time
          </p>
        </div>
      </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} />
}
