"use client"

import { useState, useEffect, Suspense } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { BarChart3, Users, Trophy, TrendingUp, ArrowLeft, RotateCcw, Download, Eye, Maximize2, Minimize2, Table, Clock, RefreshCw } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import { AuthGuard } from "@/components/auth-guard"
import { useAuth } from "@/hooks/use-auth"
import { DashboardHeader } from "@/components/dashboard-header"
import apiClient from "@/lib/api-client"
import { API_CONFIG } from "@/lib/config"
import { useToast } from "@/hooks/use-toast"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend } from 'recharts'

interface VoteEvent {
  id: string
  title: string
  description: string
  start_date: string
  end_date: string
  is_active: boolean
  is_voting_open: boolean
  results_open: boolean
}

interface VoteEventDetails {
  vote_event: VoteEvent
  total_participants: number
  total_voted: number
  total_not_voted: number
}

interface Candidate {
  id: string
  vote_event_id: string
  name: string
  image_url: string
  description: string
  created_at: string
  updated_at: string
  vote_count: number
}

interface VoteResults {
  vote_event_id: string
  candidates: Candidate[]
  total_votes: number
}

interface ChartData {
  name: string
  votes: number
  percentage: number
  fill: string
}

function ResultsPageContent() {
  const { user } = useAuth()
  const { toast } = useToast()
  const [events, setEvents] = useState<VoteEvent[]>([])
  const [selectedEventId, setSelectedEventId] = useState<string>("")
  const [results, setResults] = useState<VoteResults | null>(null)
  const [eventDetails, setEventDetails] = useState<VoteEventDetails | null>(null)
  const [loading, setLoading] = useState(false)
  const [eventsLoading, setEventsLoading] = useState(true)
  const [isFullPageChart, setIsFullPageChart] = useState(false)
  const [showCountdown, setShowCountdown] = useState(false)
  const [countdown, setCountdown] = useState(10)
  const [showResults, setShowResults] = useState(false)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [lastUpdated, setLastUpdated] = useState<Date>(new Date())

  // Chart colors
  const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#06B6D4', '#84CC16', '#F97316']

  useEffect(() => {
    fetchEvents()
  }, [])

  // Note: URL parameter handling removed for now - can be added back later if needed

  useEffect(() => {
    if (selectedEventId) {
      fetchEventDetails(selectedEventId, false)
      fetchResults(selectedEventId, false)

      // Set up interval for live updates every 10 seconds
      const interval = setInterval(() => {
        fetchEventDetails(selectedEventId, true)
        fetchResults(selectedEventId, true)
      }, 10000) // 10 seconds

      // Cleanup interval on unmount or when selectedEventId changes
      return () => clearInterval(interval)
    }
  }, [selectedEventId])

  useEffect(() => {
    let interval: NodeJS.Timeout
    if (showCountdown && countdown > 0) {
      interval = setInterval(() => {
        setCountdown(prev => prev - 1)
      }, 1000)
    } else if (showCountdown && countdown === 0) {
      // Simply transition to results - fullscreen container remains the same
      setShowCountdown(false)
      setShowResults(true)
    }
    return () => clearInterval(interval)
  }, [showCountdown, countdown])

  // Fullscreen change listener
  useEffect(() => {
    const handleFullscreenChange = () => {
      const fullscreenElement = document.fullscreenElement
      setIsFullscreen(!!fullscreenElement)

      // Add/remove fullscreen styles to the event overview card
      const eventOverviewCard = document.querySelector('[data-fullscreen-target="event-overview"]')
      if (eventOverviewCard) {
        if (fullscreenElement === eventOverviewCard) {
          eventOverviewCard.classList.add('fullscreen-active')
        } else {
          eventOverviewCard.classList.remove('fullscreen-active')
        }
      }
    }

    document.addEventListener('fullscreenchange', handleFullscreenChange)
    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange)
  }, [])

  const fetchEvents = async () => {
    try {
      setEventsLoading(true)
      const response = await apiClient.get(API_CONFIG.ENDPOINTS.VOTE_EVENTS)
      if (response.data.success) {
        const eventList = response.data.data.vote_events || []
        setEvents(eventList)
        // Auto-select the first event if available
        if (eventList.length > 0 && !selectedEventId) {
          setSelectedEventId(eventList[0].id)
        }
      }
    } catch (error) {
      console.error('Error fetching events:', error)
      toast({
        title: "Error",
        description: "Failed to fetch vote events",
        variant: "destructive"
      })
    } finally {
      setEventsLoading(false)
    }
  }

  const fetchEventDetails = async (eventId: string, showRefreshIndicator = false) => {
    try {
      if (showRefreshIndicator) setIsRefreshing(true)
      const response = await apiClient.get(`/api/v1/vote-events/${eventId}/details`)
      if (response.data.success) {
        setEventDetails(response.data.data)
        setLastUpdated(new Date())
      }
    } catch (error) {
      console.error('Error fetching event details:', error)
      // Only show toast on initial load, not on refresh
      if (!showRefreshIndicator) {
        toast({
          title: "Error",
          description: "Failed to fetch event details",
          variant: "destructive"
        })
      }
    } finally {
      if (showRefreshIndicator) {
        setTimeout(() => setIsRefreshing(false), 500) // Show indicator for at least 500ms
      }
    }
  }

  const fetchResults = async (eventId: string, showRefreshIndicator = false) => {
    try {
      if (!showRefreshIndicator) setLoading(true)
      if (showRefreshIndicator) setIsRefreshing(true)
      const response = await apiClient.get(`${API_CONFIG.ENDPOINTS.RESULTS}/${eventId}/results`)
      if (response.data.success) {
        setResults(response.data.data)
        setLastUpdated(new Date())
      }
    } catch (error) {
      console.error('Error fetching results:', error)
      // Only show toast on initial load, not on refresh
      if (!showRefreshIndicator) {
        toast({
          title: "Error",
          description: "Failed to fetch voting results",
          variant: "destructive"
        })
      }
    } finally {
      if (!showRefreshIndicator) setLoading(false)
      if (showRefreshIndicator) {
        setTimeout(() => setIsRefreshing(false), 500) // Show indicator for at least 500ms
      }
    }
  }

  const getChartData = (): (ChartData & { image_url: string; id: string })[] => {
    if (!results) return []

    return results.candidates
      .sort((a, b) => b.vote_count - a.vote_count) // Sort by vote count descending
      .map((candidate, index) => ({
        name: candidate.name,
        votes: candidate.vote_count,
        percentage: results.total_votes > 0 ? (candidate.vote_count / results.total_votes) * 100 : 0,
        fill: COLORS[index % COLORS.length],
        image_url: candidate.image_url,
        id: candidate.id
      }))
  }

  const getWinner = (): Candidate | null => {
    if (!results || results.candidates.length === 0) return null
    return results.candidates.reduce((prev, current) =>
      prev.vote_count > current.vote_count ? prev : current
    )
  }

  const getEventStatus = (event: VoteEvent) => {
    const now = new Date()
    const start = new Date(event.start_date)
    const end = new Date(event.end_date)

    if (now < start) return "upcoming"
    if (now >= start && now <= end) return "active"
    return "ended"
  }

  const getStatusBadge = (event: VoteEvent) => {
    const status = getEventStatus(event)

    if (event.is_voting_open && status === "active") {
      return <Badge className="bg-green-500 text-white">Live Voting</Badge>
    }

    switch (status) {
      case "active":
        return <Badge className="bg-orange-500 text-white">Active</Badge>
      case "upcoming":
        return <Badge className="bg-blue-500 text-white">Upcoming</Badge>
      case "ended":
        return <Badge className="bg-gray-500 text-white">Ended</Badge>
      default:
        return <Badge variant="outline">Unknown</Badge>
    }
  }

  const handleShowResults = () => {
    if (!selectedEventId || !results) {
      toast({
        title: "Error",
        description: "Please select an event with available results",
        variant: "destructive"
      })
      return
    }

    // Check if we're in fullscreen mode from the reveal button
    const isInFullscreen = document.fullscreenElement !== null

    setShowCountdown(true)
    setCountdown(10)
    setShowResults(false)

    // If we were in fullscreen from reveal, maintain it by making the container fullscreen
    if (isInFullscreen) {
      setTimeout(() => {
        const container = document.querySelector('[data-fullscreen-target="results-container"]')
        if (container && !document.fullscreenElement) {
          container.requestFullscreen().catch(err => {
            console.error('Error maintaining fullscreen:', err)
          })
        }
      }, 100)
    }
  }

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      // Find the event overview card and make it fullscreen
      const eventOverviewCard = document.querySelector('[data-fullscreen-target="event-overview"]')
      if (eventOverviewCard) {
        eventOverviewCard.requestFullscreen().catch(err => {
          console.error('Error attempting to enable fullscreen:', err)
        })
        setIsFullscreen(true)
      }
    } else {
      document.exitFullscreen()
      setIsFullscreen(false)
    }
  }

  const selectedEvent = events.find(e => e.id === selectedEventId)
  const chartData = getChartData()
  const winner = getWinner()

  return (
    <div className="min-h-screen bg-gray-50">
      <DashboardHeader title="Vote Results" />

      <div className="container mx-auto px-4 py-8">
        {/* Header Section */}
        <div className="mb-8">
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
              <h1 className="text-3xl font-bold text-gray-900">Voting Results</h1>
              <p className="text-gray-600 mt-1">View detailed voting results and statistics</p>
              {selectedEventId && (
                <div className="flex items-center gap-2 mt-2">
                  <div className={`flex items-center gap-1 text-sm ${isRefreshing ? 'text-blue-600' : 'text-gray-500'}`}>
                    <RefreshCw className={`h-3 w-3 ${isRefreshing ? 'animate-spin' : ''}`} />
                    <span>{isRefreshing ? 'Updating...' : 'Live updates every 10s'}</span>
                  </div>
                  <span className="text-gray-400">•</span>
                  <span className="text-xs text-gray-500">
                    Last updated: {lastUpdated.toLocaleTimeString()}
                  </span>
                </div>
              )}
            </div>
            <div className="flex gap-2">
              {results && (
                <>
                  <Button
                    onClick={() => setIsFullPageChart(!isFullPageChart)}
                    variant={isFullPageChart ? "default" : "outline"}
                    className="gap-2"
                  >
                    {isFullPageChart ? (
                      <>
                        <Table className="h-4 w-4" />
                        Table View
                      </>
                    ) : (
                      <>
                        <Maximize2 className="h-4 w-4" />
                        Full Chart
                      </>
                    )}
                  </Button>
                </>
              )}
                            <Button
                onClick={toggleFullscreen}
                variant="outline"
                className="gap-2"
              >
                {isFullscreen ? (
                  <>
                    <Minimize2 className="h-4 w-4" />
                    Exit Fullscreen
                  </>
                ) : (
                  <>
                    <Maximize2 className="h-4 w-4" />
                    Fullscreen Overview
                  </>
                )}
              </Button>
              <Button onClick={fetchEvents} variant="outline" className="gap-2">
                <RotateCcw className="h-4 w-4" />
                Refresh
              </Button>
            </div>
          </div>
        </div>

        {/* Event Selection */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <BarChart3 className="h-5 w-5" />
              Select Voting Event
            </CardTitle>
            <CardDescription>
              Choose an event to view its voting results and statistics
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid md:grid-cols-2 gap-4 items-end">
              <div>
                <label className="text-sm font-medium text-gray-700 mb-2 block">
                  Vote Event
                </label>
                <Select value={selectedEventId} onValueChange={setSelectedEventId}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a vote event" />
                  </SelectTrigger>
                  <SelectContent>
                    {events.map((event) => (
                      <SelectItem key={event.id} value={event.id}>
                        <div className="flex items-center justify-between w-full">
                          <span>{event.title}</span>
                          <div className="ml-2">
                            {getStatusBadge(event)}
                          </div>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {selectedEvent && (
                <div className="space-y-2">
                  <div className="text-sm text-gray-600">
                    <strong>Event:</strong> {selectedEvent.title}
                  </div>
                  <div className="text-sm text-gray-600">
                    <strong>Period:</strong> {new Date(selectedEvent.start_date).toLocaleDateString()} - {new Date(selectedEvent.end_date).toLocaleDateString()}
                  </div>
                </div>
              )}
            </div>
          </CardContent>
        </Card>

        {/* Loading State */}
        {loading && (
          <div className="text-center py-12">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Loading results...</p>
          </div>
        )}

        {/* Loading Event Details */}
        {!loading && selectedEventId && !eventDetails && (
          <div className="text-center py-12">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Loading event details...</p>
          </div>
        )}

        {/* Results Content */}
        {!loading && selectedEventId && results && (
          <>
            {/* Event Statistics */}
            {!showCountdown && !showResults && (
              <>
                {eventDetails ? (
                  <div className="space-y-6 mb-8 animate-fade-in-up">
                    {/* Event Overview */}
                    <Card data-fullscreen-target="event-overview" className="relative">
                      {/* Logo for Fullscreen Mode */}
                      <div className="fullscreen-logo">
                        <Image
                          src="/logo.jpeg"
                          alt="Logo"
                          width={80}
                          height={80}
                          className="rounded-lg shadow-lg"
                        />
                      </div>

                      <CardHeader className="card-header">
                            <div className="flex items-center justify-center gap-3 mb-2">
                              {isRefreshing && (
                                <Badge className="bg-blue-500 text-white animate-pulse">
                                  <RefreshCw className="h-3 w-3 mr-1 animate-spin" />
                                  Updating
                                </Badge>
                              )}
                              <Badge className="bg-green-500 text-white">
                                <div className="w-2 h-2 bg-white rounded-full animate-pulse mr-2"></div>
                                Live
                              </Badge>
                            </div>
                            <CardTitle className="text-4xl font-bold text-center">
                              {eventDetails.vote_event.title}
                            </CardTitle>
                      </CardHeader>
                      <CardContent className="card-content">
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                          <div className="text-center p-4 bg-blue-50 rounded-lg border border-blue-200">
                            <Users className="h-8 w-8 text-blue-600 mx-auto mb-2" />
                            <div className="text-2xl font-bold text-blue-600">
                              {eventDetails.total_participants}
                            </div>
                            <p className="text-sm text-blue-700 font-medium">Total Participants</p>
                          </div>

                          <div className="text-center p-4 bg-green-50 rounded-lg border border-green-200">
                            <TrendingUp className="h-8 w-8 text-green-600 mx-auto mb-2" />
                            <div className="text-2xl font-bold text-green-600">
                              {eventDetails.total_voted}
                            </div>
                            <p className="text-sm text-green-700 font-medium">Total Voted</p>
                          </div>

                          <div className="text-center p-4 bg-orange-50 rounded-lg border border-orange-200">
                            <Clock className="h-8 w-8 text-orange-600 mx-auto mb-2" />
                            <div className="text-2xl font-bold text-orange-600">
                              {eventDetails.total_not_voted}
                            </div>
                            <p className="text-sm text-orange-700 font-medium">Not Voted</p>
                          </div>
                        </div>

                        {/* Participation Rate */}
                        <div className="mt-6 p-4 bg-gradient-to-r from-purple-50 to-blue-50 rounded-lg border border-purple-200">
                          <div className="text-center">
                            <div className="text-3xl font-bold text-purple-600 mb-2">
                              {eventDetails.total_participants > 0
                                ? ((eventDetails.total_voted / eventDetails.total_participants) * 100).toFixed(1)
                                : '0'
                              }%
                            </div>
                            <p className="text-gray-700 font-medium">Participation Rate</p>
                            <p className="text-sm text-gray-600">
                              {eventDetails.total_voted} out of {eventDetails.total_participants} participants have voted
                            </p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                ) : (
                  <div className="mb-8">
                    <Card>
                      <CardContent className="text-center py-8">
                        <BarChart3 className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                        <p className="text-gray-600">Event details not available</p>
                      </CardContent>
                    </Card>
                  </div>
                )}

                {/* Show Results Button */}
                <Card data-fullscreen-target="reveal-results" className="relative">
                  {/* Logo for Fullscreen Mode */}
                  <div className="fullscreen-logo">
                    <Image
                      src="/logo.jpeg"
                      alt="Logo"
                      width={80}
                      height={80}
                      className="rounded-lg shadow-lg"
                    />
                  </div>

                  <CardContent className="text-center py-16 reveal-content">
                    <Button
                      onClick={() => {
                        const revealCard = document.querySelector('[data-fullscreen-target="reveal-results"]')
                        if (revealCard && !document.fullscreenElement) {
                          revealCard.requestFullscreen().catch(err => {
                            console.error('Error attempting to enable fullscreen:', err)
                          })
                        }
                      }}
                      variant="outline"
                      size="sm"
                      className="absolute top-4 right-4 gap-2 fullscreen-toggle-btn"
                    >
                      <Maximize2 className="h-4 w-4" />
                      Fullscreen
                    </Button>

                    {/* Exit fullscreen button (hidden by default, shown in fullscreen) */}
                    <Button
                      onClick={() => {
                        if (document.fullscreenElement) {
                          document.exitFullscreen()
                        }
                      }}
                      variant="outline"
                      size="sm"
                      className="hidden exit-fullscreen-btn"
                    >
                      <Minimize2 className="h-4 w-4" />
                      Exit Fullscreen
                    </Button>

                    {/* Event Details Section (hidden by default, shown in fullscreen) */}
                    {eventDetails && (
                      <div className="event-details-fullscreen hidden">
                        <div className="event-stats-grid">
                          <div className="stat-card participants-card">
                            <Users className="stat-icon" />
                            <div className="stat-value">{eventDetails.total_participants}</div>
                            <p className="stat-label">Total Participants</p>
                          </div>

                          <div className="stat-card voted-card">
                            <TrendingUp className="stat-icon" />
                            <div className="stat-value">{eventDetails.total_voted}</div>
                            <p className="stat-label">Total Voted</p>
                          </div>

                          <div className="stat-card not-voted-card">
                            <Clock className="stat-icon" />
                            <div className="stat-value">{eventDetails.total_not_voted}</div>
                            <p className="stat-label">Not Voted</p>
                          </div>
                        </div>

                        <div className="participation-rate-card">
                          <div className="rate-value">
                            {eventDetails.total_participants > 0
                              ? ((eventDetails.total_voted / eventDetails.total_participants) * 100).toFixed(1)
                              : '0'
                            }%
                          </div>
                          <p className="rate-label">Participation Rate</p>
                          <p className="rate-description">
                            {eventDetails.total_voted} out of {eventDetails.total_participants} participants have voted
                          </p>
                        </div>
                      </div>
                    )}

                    {/* Trophy icon for normal mode */}
                    <Trophy className="h-16 w-16 text-blue-500 mx-auto mb-6 trophy-icon-normal" />
                    <h2 className="text-2xl font-bold mb-4 reveal-title">{selectedEvent?.title}</h2>
                    <p className="text-gray-600 mb-8 reveal-description">
                      Click the button below to see the voting results for "{selectedEvent?.title}"
                    </p>
                    <Button
                      onClick={(e) => {
                        e.stopPropagation()
                        handleShowResults()
                      }}
                      size="lg"
                      className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3 text-lg reveal-button"
                    >
                      <BarChart3 className="mr-2 h-5 w-5" />
                      Show Results
                    </Button>
                  </CardContent>
                </Card>
              </>

            )}

            {/* Results Container - Wraps both countdown and results for seamless fullscreen */}
            <div data-fullscreen-target="results-container" className="results-fullscreen-container">
              {/* Logo for Fullscreen Mode */}
              <div className="fullscreen-logo">
                <Image
                  src="/logo.jpeg"
                  alt="Logo"
                  width={80}
                  height={80}
                  className="rounded-lg shadow-lg"
                />
              </div>

              {/* Countdown Animation */}
              {showCountdown && (
                <Card className="relative countdown-card">
                  <CardContent className="text-center py-24 countdown-content">
                    <Button
                      onClick={() => {
                        const container = document.querySelector('[data-fullscreen-target="results-container"]')
                        if (container && !document.fullscreenElement) {
                          container.requestFullscreen().catch(err => {
                            console.error('Error attempting to enable fullscreen:', err)
                          })
                        }
                      }}
                      variant="outline"
                      size="sm"
                      className="absolute top-4 right-4 gap-2 fullscreen-toggle-btn"
                    >
                      <Maximize2 className="h-4 w-4" />
                      Fullscreen
                    </Button>

                  <Button
                    onClick={() => {
                      if (document.fullscreenElement) {
                        document.exitFullscreen()
                      }
                    }}
                    variant="outline"
                    size="sm"
                    className="hidden exit-fullscreen-btn"
                  >
                    <Minimize2 className="h-4 w-4" />
                    Exit Fullscreen
                  </Button>

                  <div className="relative countdown-wrapper">
                    <div className={`text-8xl font-bold mb-4 transition-all duration-1000 countdown-number ${
                      countdown <= 3 ? 'text-red-500 scale-125' : 'text-blue-500 scale-100'
                    }`}>
                      {countdown}
                    </div>
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className={`w-32 h-32 border-4 border-blue-200 rounded-full animate-pulse countdown-circle ${
                        countdown <= 3 ? 'border-red-200' : ''
                      }`}></div>
                    </div>
                  </div>
                  <p className="text-xl text-gray-600 animate-bounce countdown-text">
                    {countdown > 5 ? 'Preparing results...' :
                     countdown > 3 ? 'Almost ready...' : 'Here we go!'}
                  </p>
                  </CardContent>
                </Card>
              )}

              {/* Animated Results Display */}
              {showResults && (
                <div className="space-y-8 results-display">
                {/* Fullscreen Results Button */}
                  <div className="flex justify-end">
                    <Button
                      onClick={() => {
                        const container = document.querySelector('[data-fullscreen-target="results-container"]')
                        if (container && !document.fullscreenElement) {
                          container.requestFullscreen().catch(err => {
                            console.error('Error attempting to enable fullscreen:', err)
                          })
                        } else if (document.fullscreenElement) {
                          document.exitFullscreen()
                        }
                      }}
                      variant="outline"
                      className="gap-2 fullscreen-results-btn"
                    >
                    <Maximize2 className="h-4 w-4 maximize-icon" />
                    <Minimize2 className="h-4 w-4 minimize-icon hidden" />
                    <span className="btn-text">Fullscreen Results</span>
                  </Button>
                </div>
                {/* Animated Bar Chart with Profile Images */}
                <Card className="animate-fade-in-up results-card" style={{ animationDelay: '0.3s' }}>
                  <CardHeader className="text-center">
                    <div className="flex items-center justify-center gap-2 mb-2">
                      {isRefreshing && (
                        <Badge className="bg-blue-500 text-white animate-pulse">
                          <RefreshCw className="h-3 w-3 mr-1 animate-spin" />
                          Updating
                        </Badge>
                      )}
                      <Badge className="bg-green-500 text-white">
                        <div className="w-2 h-2 bg-white rounded-full animate-pulse mr-2"></div>
                        Live Results
                      </Badge>
                    </div>
                    <CardTitle className="text-2xl results-title">Final Results</CardTitle>
                    <CardDescription className="results-subtitle">
                      Vote distribution by candidate • Updated: {lastUpdated.toLocaleTimeString()}
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    {chartData.length > 0 ? (
                      <div className="vertical-chart-container">
                        {/* Vertical Bar Chart */}
                        <div className="flex items-end justify-center gap-8 mb-8" style={{ height: '400px' }}>
                          {chartData.map((candidate, index) => {
                            const maxVotes = Math.max(...chartData.map(c => c.votes))
                            const barHeight = candidate.votes > 0 ? (candidate.votes / maxVotes) * 100 : 0

                            return (
                              <div key={candidate.id} className="flex flex-col items-center flex-1 h-full justify-end">
                                {/* Percentage above bar */}
                                <div
                                  className="text-2xl font-bold mb-2"
                                  style={{ color: candidate.fill }}
                                >
                                  {candidate.percentage.toFixed(1)}%
                                </div>

                                {/* Vertical Bar Container */}
                                <div className="relative w-full max-w-[120px] h-full flex items-end">
                                  {/* Background bar */}
                                  <div className="absolute inset-0 bg-gradient-to-t from-gray-200 to-gray-100 rounded-t-2xl"></div>

                                  {/* Animated Bar */}
                                  <div
                                    className="relative w-full rounded-t-2xl shadow-lg overflow-hidden vertical-bar"
                                    style={{
                                      background: `linear-gradient(135deg, ${candidate.fill}, ${candidate.fill}dd)`,
                                      height: `${barHeight}%`,
                                      transition: 'height 2s ease-out',
                                      transitionDelay: `${index * 300}ms`,
                                      minHeight: candidate.votes > 0 ? '40px' : '0'
                                    }}
                                  >
                                    {/* Shimmer Effect */}
                                    <div className="absolute inset-0 bg-gradient-to-t from-transparent via-white/20 to-transparent animate-pulse"></div>

                                    {/* Vote count inside bar */}
                                    <div className="absolute inset-0 flex items-center justify-center">
                                      <span className="text-white font-bold text-lg transform rotate-0">
                                        {candidate.votes}
                                      </span>
                                    </div>
                                  </div>
                                </div>

                                {/* Candidate Info Below Bar */}
                                <div className="mt-4 text-center">
                                  {/* Profile Image */}
                                  <div className="relative w-20 h-20 mx-auto mb-2 profile-image-container">
                                    {candidate.image_url ? (
                                      <Image
                                        src={candidate.image_url}
                                        alt={candidate.name}
                                        fill
                                        className="object-cover rounded-full border-4 shadow-lg"
                                        style={{ borderColor: candidate.fill }}
                                      />
                                    ) : (
                                      <div
                                        className="w-full h-full bg-gray-200 rounded-full flex items-center justify-center border-4 shadow-lg"
                                        style={{ borderColor: candidate.fill }}
                                      >
                                        <Users className="h-8 w-8 text-gray-400" />
                                      </div>
                                    )}

                                    {/* Rank Badge */}
                                    <div className="absolute -top-2 -right-2">
                                      <div className={`px-2 py-1 rounded-full text-white font-bold text-xs shadow-lg ${
                                        index === 0 ? 'bg-gradient-to-r from-yellow-400 to-yellow-600' :
                                        index === 1 ? 'bg-gradient-to-r from-gray-400 to-gray-600' :
                                        index === 2 ? 'bg-gradient-to-r from-orange-400 to-orange-600' :
                                        'bg-gradient-to-r from-blue-400 to-blue-600'
                                      }`}>
                                        #{index + 1}
                                      </div>
                                    </div>

                                    {/* Winner Crown */}
                                    {index === 0 && candidate.votes > 0 && (
                                      <div className="absolute -top-6 left-1/2 transform -translate-x-1/2">
                                        <Trophy className="h-6 w-6 text-yellow-500 animate-bounce" />
                                      </div>
                                    )}
                                  </div>

                                  {/* Candidate Name */}
                                  <h3 className="text-lg font-bold text-gray-900 mb-1">{candidate.name}</h3>

                                  {/* Winner/Place Badge */}
                                  {index < 3 && candidate.votes > 0 && (
                                    <span className="text-xs px-2 py-1 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium">
                                      {index === 0 ? '🏆 Winner' : index === 1 ? '🥈 2nd' : '🥉 3rd'}
                                    </span>
                                  )}
                                </div>
                              </div>
                            )
                          })}
                        </div>

                        {/* Total Votes Summary */}
                        <div className="mt-8 p-4 bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg border-2 border-blue-200">
                          <div className="text-center">
                            <div className="text-3xl font-bold text-gray-900 mb-2">
                              {results.total_votes}
                            </div>
                            <p className="text-gray-600">Total Votes Cast</p>
                          </div>
                        </div>
                      </div>
                    ) : (
                      <div className="h-96 flex items-center justify-center bg-gray-50 rounded-lg">
                        <div className="text-center">
                          <BarChart3 className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                          <p className="text-gray-600">No voting data available</p>
                        </div>
                      </div>
                    )}
                  </CardContent>
                </Card>
              </div>
            )}
            </div>
          </>
        )}

        {/* No Event Selected */}
        {!loading && !selectedEventId && (
          <Card>
            <CardContent className="text-center py-12">
              <BarChart3 className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-medium mb-2">Select a Vote Event</h3>
              <p className="text-gray-600">Choose an event from the dropdown above to view its results</p>
            </CardContent>
          </Card>
        )}

        {/* No Results Available */}
        {!loading && selectedEventId && !results && (
          <Card>
            <CardContent className="text-center py-12">
              <BarChart3 className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-medium mb-2">No Results Available</h3>
              <p className="text-gray-600">Results for this event are not yet available</p>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}

export default function ResultsPage() {
  return (
    <AuthGuard requiredRole="superadmin">
      <Suspense fallback={
        <div className="min-h-screen flex items-center justify-center bg-gray-50">
          <div className="text-center">
            <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600 mx-auto mb-4"></div>
            <p className="text-gray-600">Loading...</p>
          </div>
        </div>
      }>
        <ResultsPageContent />
      </Suspense>
    </AuthGuard>
  )
}