"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 } 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
}

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 [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)

  // 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) {
      fetchResults(selectedEventId)
    }
  }, [selectedEventId])

  useEffect(() => {
    let interval: NodeJS.Timeout
    if (showCountdown && countdown > 0) {
      interval = setInterval(() => {
        setCountdown(prev => prev - 1)
      }, 1000)
    } else if (showCountdown && countdown === 0) {
      setShowCountdown(false)
      setShowResults(true)
    }
    return () => clearInterval(interval)
  }, [showCountdown, countdown])

  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 fetchResults = async (eventId: string) => {
    try {
      setLoading(true)
      const response = await apiClient.get(`${API_CONFIG.ENDPOINTS.RESULTS}/${eventId}/results`)
      if (response.data.success) {
        setResults(response.data.data)
      }
    } catch (error) {
      console.error('Error fetching results:', error)
      toast({
        title: "Error",
        description: "Failed to fetch voting results",
        variant: "destructive"
      })
    } finally {
      setLoading(false)
    }
  }

  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
    }
    setShowCountdown(true)
    setCountdown(10)
    setShowResults(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>
            </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={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>
        )}

        {/* Results Content */}
        {!loading && selectedEventId && results && (
          <>
            {/* Show Results Button */}
            {!showCountdown && !showResults && (
              <Card>
                <CardContent className="text-center py-16">
                  <Trophy className="h-16 w-16 text-blue-500 mx-auto mb-6" />
                  <h2 className="text-2xl font-bold mb-4">Ready to Reveal Results?</h2>
                  <p className="text-gray-600 mb-8">
                    Click the button below to see the voting results for "{selectedEvent?.title}"
                  </p>
                  <Button 
                    onClick={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"
                  >
                    <BarChart3 className="mr-2 h-5 w-5" />
                    Show Results
                  </Button>
                </CardContent>
              </Card>
            )}

            {/* Countdown Animation */}
            {showCountdown && (
              <Card>
                <CardContent className="text-center py-24">
                  <div className="relative">
                    <div className={`text-8xl font-bold mb-4 transition-all duration-1000 ${
                      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 <= 3 ? 'border-red-200' : ''
                      }`}></div>
                    </div>
                  </div>
                  <p className="text-xl text-gray-600 animate-bounce">
                    {countdown > 5 ? 'Preparing results...' : 
                     countdown > 3 ? 'Almost ready...' : 'Here we go!'}
                  </p>
                </CardContent>
              </Card>
            )}

            {/* Animated Results Display */}
            {showResults && (
              <div className="space-y-8">
                {/* Winner Announcement */}
                <Card className="animate-fade-in-up">
                  <CardContent className="text-center py-12">
                    <div className="mb-6">
                      <Trophy className="h-16 w-16 text-yellow-500 mx-auto animate-bounce" />
                    </div>
                    <h2 className="text-3xl font-bold mb-2 text-gray-900">
                      🎉 Winner: {winner?.name || "No votes yet"} 🎉
                    </h2>
                    <p className="text-xl text-gray-600">
                      {winner ? `${winner.vote_count} votes (${((winner.vote_count / results.total_votes) * 100).toFixed(1)}%)` : "Waiting for votes"}
                    </p>
                  </CardContent>
                </Card>

                {/* Animated Bar Chart with Profile Images */}
                <Card className="animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
                  <CardHeader className="text-center">
                    <CardTitle className="text-2xl">Final Results</CardTitle>
                    <CardDescription>Vote distribution by candidate</CardDescription>
                  </CardHeader>
                  <CardContent>
                    {chartData.length > 0 ? (
                      <div className="space-y-6">
                        {chartData.map((candidate, index) => {
                          const maxVotes = Math.max(...chartData.map(c => c.votes))
                          const barWidth = candidate.votes > 0 ? (candidate.votes / maxVotes) * 100 : 0
                          
                          return (
                            <div key={candidate.id} className="relative">
                              {/* Candidate Info Row */}
                              <div className="flex items-center gap-4 mb-3 p-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow">
                                {/* Profile Image */}
                                <div className="relative w-20 h-20 flex-shrink-0 profile-image-container">
                                  {candidate.image_url ? (
                                    <Image
                                      src={candidate.image_url}
                                      alt={candidate.name}
                                      fill
                                      className="object-cover rounded-full border-4 shadow-lg transition-transform"
                                      style={{ borderColor: candidate.fill }}
                                    />
                                  ) : (
                                    <div 
                                      className="w-full h-full bg-gray-200 rounded-full flex items-center justify-center border-4 shadow-lg transition-transform"
                                      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-3 py-1 rounded-full text-white font-bold text-sm 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-3 left-1/2 transform -translate-x-1/2">
                                      <Trophy className="h-6 w-6 text-yellow-500 animate-bounce" />
                                    </div>
                                  )}
                                </div>
                                
                                {/* Candidate Name and Info */}
                                <div className="flex-grow">
                                  <div className="flex items-center gap-2 mb-1">
                                    <h3 className="text-xl font-bold text-gray-900">{candidate.name}</h3>
                                    {index < 3 && (
                                      <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>
                                  <p className="text-sm text-gray-600 font-medium">{candidate.votes} votes</p>
                                </div>
                                
                                {/* Percentage Display */}
                                <div className="text-right">
                                  <div 
                                    className="text-3xl font-bold mb-1"
                                    style={{ color: candidate.fill }}
                                  >
                                    {candidate.percentage.toFixed(1)}%
                                  </div>
                                  <div className="text-xs text-gray-500 font-medium">
                                    of {results.total_votes} votes
                                  </div>
                                </div>
                              </div>
                              
                              {/* Enhanced Animated Bar */}
                              <div className="relative bg-gradient-to-r from-gray-200 to-gray-300 rounded-full h-12 overflow-hidden shadow-inner mb-4">
                                <div
                                  className="h-full rounded-full flex items-center justify-between px-4 shadow-lg relative overflow-hidden"
                                  style={{
                                    background: `linear-gradient(135deg, ${candidate.fill}, ${candidate.fill}dd)`,
                                    width: `${barWidth}%`,
                                    transition: 'width 2s ease-out',
                                    transitionDelay: `${index * 300}ms`
                                  }}
                                >
                                  {/* Shimmer Effect */}
                                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"></div>
                                  
                                  {/* Vote count inside bar */}
                                  <div className="relative z-10 flex items-center justify-between w-full">
                                    {barWidth > 20 && (
                                      <span className="text-white font-bold text-sm">
                                        {candidate.name}
                                      </span>
                                    )}
                                    {barWidth > 10 && (
                                      <span className="text-white font-bold text-lg">
                                        {candidate.votes}
                                      </span>
                                    )}
                                  </div>
                                </div>
                                
                                {/* Percentage label outside bar for small bars */}
                                {barWidth < 20 && candidate.votes > 0 && (
                                  <div className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-700 font-bold text-sm">
                                    {candidate.votes}
                                  </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>

                {/* Summary Stats */}
                <div className="grid md:grid-cols-3 gap-6 animate-fade-in-up" style={{ animationDelay: '0.6s' }}>
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Total Votes</CardTitle>
                      <Users className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-3xl font-bold text-blue-600">{results.total_votes}</div>
                      <p className="text-xs text-muted-foreground">
                        Cast across all candidates
                      </p>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Candidates</CardTitle>
                      <Trophy className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-3xl font-bold text-green-600">{results.candidates.length}</div>
                      <p className="text-xs text-muted-foreground">
                        Participated in voting
                      </p>
                    </CardContent>
                  </Card>

                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Winning Margin</CardTitle>
                      <TrendingUp className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-3xl font-bold text-purple-600">
                        {winner && results.candidates.length > 1 ? 
                          `${Math.max(0, winner.vote_count - Math.max(...results.candidates.filter(c => c.id !== winner.id).map(c => c.vote_count)))}` : 
                          '0'
                        }
                      </div>
                      <p className="text-xs text-muted-foreground">
                        Vote difference
                      </p>
                    </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>
  )
}