"use client"

import { useState, useEffect } from 'react'
import { useAuth } from '@/contexts/AuthContext'
import { Gift, Calendar, DollarSign, CheckCircle, Lock, User, Clock } from 'lucide-react'

interface DailyReward {
  day: number
  money: number
  claimed: boolean
  available: boolean
}

interface Character {
  character_id: number
  character_name: string
  cash: number
  bank_balance: number
}

interface DailyRewardsProps {
  characters: Character[]
}

export default function DailyRewards({ characters }: DailyRewardsProps) {
  const { user } = useAuth()
  const [rewards, setRewards] = useState<DailyReward[]>([])
  const [currentDay, setCurrentDay] = useState(1)
  const [lastClaimDate, setLastClaimDate] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const [selectedCharacter, setSelectedCharacter] = useState<Character | null>(null)
  const [showCharacterSelect, setShowCharacterSelect] = useState(false)
  const [showSuccess, setShowSuccess] = useState(false)
  const [lastReward, setLastReward] = useState<{day: number, money: number, character: string} | null>(null)
  const [timeUntilNextDay, setTimeUntilNextDay] = useState<string>('')

  // Initialize rewards
  useEffect(() => {
    if (user) {
      initializeRewards()
    }
  }, [user])



  // Set selected character when characters change
  useEffect(() => {

    if (characters.length > 0 && !selectedCharacter) {
      setSelectedCharacter(characters[0])
    }
  }, [characters, selectedCharacter])

  // Check for new day and reset if needed
  useEffect(() => {
    if (user) {
      const today = new Date().toDateString()
      const storedLastClaim = localStorage.getItem(`dailyReward_${user?.id}`)
      
      // If it's a new day, check if we should advance to next day
      if (storedLastClaim && storedLastClaim !== today) {
        const lastClaim = new Date(storedLastClaim)
        const yesterday = new Date()
        yesterday.setDate(yesterday.getDate() - 1)
        
        // If it's consecutive (yesterday), advance to next day
        if (lastClaim.toDateString() === yesterday.toDateString()) {
          const nextDay = Math.min((parseInt(localStorage.getItem(`dailyReward_currentDay_${user?.id}`) || '1') + 1), 7)
          setCurrentDay(nextDay)
          localStorage.setItem(`dailyReward_currentDay_${user?.id}`, nextDay.toString())
  
        } else {
          // Missed a day, reset to day 1
          setCurrentDay(1)
          localStorage.setItem(`dailyReward_currentDay_${user?.id}`, '1')
          localStorage.removeItem(`dailyReward_claimedDays_${user?.id}`)
  
        }
      }
    }
  }, [user])

  // Sync rewards availability when currentDay changes
  useEffect(() => {
    if (rewards.length > 0) {
      setRewards(prev => prev.map(reward => ({
        ...reward,
        // Only the exact current day should be available (if not claimed)
        available: reward.day === currentDay && !reward.claimed
      })))
    }
  }, [currentDay, rewards.length])

  // Timer to show countdown until next day and unlock next day when ready
  useEffect(() => {
    if (!user) return

    const timer = setInterval(() => {
      const lastClaimTime = localStorage.getItem(`dailyReward_lastClaimTime_${user?.id}`)
      
      if (lastClaimTime) {
        const timeSinceLastClaim = Date.now() - parseInt(lastClaimTime)
        const hoursSinceLastClaim = timeSinceLastClaim / (1000 * 60 * 60)
        
        if (hoursSinceLastClaim < 24) {
          // Still in cooldown period
          const remainingHours = Math.floor(24 - hoursSinceLastClaim)
          const remainingMinutes = Math.floor((24 - hoursSinceLastClaim - remainingHours) * 60)
          setTimeUntilNextDay(`${remainingHours}h ${remainingMinutes}m`)
        } else {
          // 24 hours have passed, unlock next day
          setTimeUntilNextDay('Ready!')
          
          // Check if we should advance to next day
          const claimedDays = localStorage.getItem(`dailyReward_claimedDays_${user?.id}`)
          if (claimedDays) {
            try {
              const claimed = JSON.parse(claimedDays)
              const lastClaimedDay = Math.max(...claimed)
              
                             if (lastClaimedDay < 7 && lastClaimedDay === currentDay) {
                 // Advance to next day after 24 hours
                 const nextDay = lastClaimedDay + 1
                 setCurrentDay(nextDay)
                 localStorage.setItem(`dailyReward_currentDay_${user?.id}`, nextDay.toString())
               } else if (lastClaimedDay === 7) {
                 // Cycle complete, restart after 24 hours
                 setCurrentDay(1)
                 localStorage.setItem(`dailyReward_currentDay_${user?.id}`, '1')
                 localStorage.removeItem(`dailyReward_claimedDays_${user?.id}`)
                 localStorage.removeItem(`dailyReward_lastClaimTime_${user?.id}`)
                 setLastClaimDate(null)
               }
            } catch (error) {
              console.error('Error parsing claimed days:', error)
            }
          }
        }
      } else {
        setTimeUntilNextDay('')
      }
    }, 1000)

    return () => clearInterval(timer)
  }, [user, currentDay])

  const initializeRewards = () => {
    const today = new Date().toDateString()
    const storedLastClaim = localStorage.getItem(`dailyReward_${user?.id}`)
    const storedCurrentDay = localStorage.getItem(`dailyReward_currentDay_${user?.id}`)
    const storedClaimedDays = localStorage.getItem(`dailyReward_claimedDays_${user?.id}`)
    
    if (storedLastClaim) {
      setLastClaimDate(storedLastClaim)
      
      // Check if it's a new day
      if (storedLastClaim !== today) {
        // Check if it's consecutive
        const lastClaim = new Date(storedLastClaim)
        const yesterday = new Date()
        yesterday.setDate(yesterday.getDate() - 1)
        
        if (lastClaim.toDateString() === yesterday.toDateString()) {
          // Consecutive day - advance to next day
          const nextDay = Math.min((parseInt(storedCurrentDay || '1') + 1), 7)
          setCurrentDay(nextDay)
          localStorage.setItem(`dailyReward_currentDay_${user?.id}`, nextDay.toString())
        } else {
          // Missed a day, reset to day 1
          setCurrentDay(1)
          localStorage.setItem(`dailyReward_currentDay_${user?.id}`, '1')
          // Clear claimed days when streak is broken
          localStorage.removeItem(`dailyReward_claimedDays_${user?.id}`)
        }
      } else {
        // Same day, restore current day and claimed days
        const currentDayValue = parseInt(storedCurrentDay || '1')
        setCurrentDay(currentDayValue)
      }
    } else {
      // First time user, start at day 1
      setCurrentDay(1)
      localStorage.setItem(`dailyReward_currentDay_${user?.id}`, '1')
    }

    // Create rewards array
    const rewardsArray: DailyReward[] = Array.from({ length: 7 }, (_, index) => ({
      day: index + 1,
      money: (index + 1) * 1000,
      claimed: false,
      // Only the exact current day should be available
      available: index + 1 === currentDay
    }))

    // Mark claimed days from localStorage
    if (storedClaimedDays) {
      try {
        const claimedDays = JSON.parse(storedClaimedDays)
        rewardsArray.forEach((reward) => {
          if (claimedDays.includes(reward.day)) {
            reward.claimed = true
          }
        })
      } catch (error) {
        console.error('Error parsing claimed days:', error)
      }
    }

    setRewards(rewardsArray)
  }



      const claimReward = async (day: number) => {
    if (!user || loading || !selectedCharacter) return

    // Check if this day was already claimed today
    const storedClaimedDays = localStorage.getItem(`dailyReward_claimedDays_${user?.id}`)
    let claimedDays = storedClaimedDays ? JSON.parse(storedClaimedDays) : []
    
    if (claimedDays.includes(day)) {
      return
    }

    // Double-check that only the current day can be claimed
    if (day !== currentDay) {
      return
    }

    // Triple-check that this day is actually available in the rewards array
    const rewardToClaim = rewards.find(r => r.day === day)
    if (!rewardToClaim || !rewardToClaim.available) {
      return
    }

    // Check if enough time has passed since last claim (24 hours)
    const lastClaimTime = localStorage.getItem(`dailyReward_lastClaimTime_${user?.id}`)
    if (lastClaimTime) {
      const timeSinceLastClaim = Date.now() - parseInt(lastClaimTime)
      const hoursSinceLastClaim = timeSinceLastClaim / (1000 * 60 * 60)
      
      if (hoursSinceLastClaim < 24) {
        return
      }
    }

    setLoading(true)
    try {
      const rewardMoney = day * 1000

      setRewards(prev =>
        prev.map(r => (r.day === day ? { ...r, claimed: true } : r))
      )

      const today = new Date().toDateString()
      localStorage.setItem(`dailyReward_${user.id}`, today)
      setLastClaimDate(today)
      localStorage.setItem(`dailyReward_lastClaimTime_${user?.id}`, Date.now().toString())

      claimedDays.push(day)
      localStorage.setItem(`dailyReward_claimedDays_${user?.id}`, JSON.stringify(claimedDays))

      setLastReward({
        day,
        money: rewardMoney,
        character: selectedCharacter.character_name,
      })
      setShowSuccess(true)
      setTimeout(() => setShowSuccess(false), 5000)
    } catch (error) {
      console.error('Error claiming reward:', error)
    } finally {
      setLoading(false)
    }
  }

  const formatMoney = (amount: number) => {
    if (amount >= 1000) return `$${(amount / 1000).toFixed(0)}K`
    return `$${amount}`
  }







  const getRewardStatus = (reward: DailyReward) => {
    if (reward.claimed) return 'claimed'
    if (reward.available) return 'available'
    return 'locked'
  }

  if (!user) return null

     return (
           <div className="bg-gray-900 rounded-3xl p-4 shadow-2xl border border-gray-600/30">
              {/* Header */}
        <div className="flex items-center justify-between mb-4">
         <div className="flex items-center space-x-3">
                                                                                               <div className="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center">
                <Gift className="w-6 h-6 text-white" />
              </div>
           <div>
             <h3 className="text-xl font-bold text-white">Daily Rewards</h3>
                                                       <p className="text-gray-300 text-sm">Claim your daily bonus!</p>
           </div>
         </div>
                                       <div className="text-right">
                                                                                                               <div className="text-2xl font-bold text-green-500">Day {currentDay}</div>
               <div className="text-gray-300 text-sm">
               {currentDay === 7 && rewards.find(r => r.day === 7)?.claimed ? 'Complete!' : 'of 7'}
             </div>
           </div>
       </div>

               {/* Character Selection */}
        {characters.length > 1 && (
          <div className="mb-4 p-3 bg-gray-800/80 rounded-3xl border border-gray-500/30">
           <div className="flex items-center justify-between mb-3">
             <h4 className="text-gray-200 font-medium">Select Character for Reward</h4>
                            <button
                 onClick={() => setShowCharacterSelect(!showCharacterSelect)}
                 className="text-green-500 hover:text-green-400 text-sm font-medium transition-colors"
               >
               {showCharacterSelect ? 'Hide' : 'Change'}
             </button>
           </div>
           
           {!showCharacterSelect ? (
             <div className="flex items-center space-x-3">
                               <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
                  <User className="w-4 h-4 text-white" />
                </div>
               <div>
                 <p className="text-white font-medium">{selectedCharacter?.character_name}</p>
                                                                       <p className="text-gray-300 text-sm">
                     Cash: ${selectedCharacter?.cash?.toLocaleString() || '0'} | 
                     Bank: ${selectedCharacter?.bank_balance?.toLocaleString() || '0'}
                   </p>
               </div>
             </div>
           ) : (
             <div className="space-y-2">
                               {characters.map((character) => (
                  <div
                    key={character.character_id}
                    onClick={() => {
                      setSelectedCharacter(character)
                      setShowCharacterSelect(false)
                    }}
                                                                                                      className={`p-3 rounded-3xl cursor-pointer transition-all duration-200 border ${
                                                  selectedCharacter?.character_id === character.character_id
                            ? 'bg-gray-800/90 border-green-500 text-white'
                            : 'bg-gray-800/60 border-gray-600/50 text-gray-300 hover:bg-gray-800/80 hover:border-green-500'
                       }`}
                 >
                   <div className="flex items-center justify-between">
                     <div className="flex items-center space-x-3">
                                               <div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center">
                          <User className="w-3 h-3 text-white" />
                        </div>
                       <span className="font-medium">{character.character_name}</span>
                     </div>
                     <div className="text-right text-sm">
                                               <div className="text-green-600">${character.cash?.toLocaleString() || '0'}</div>
                        <div className="text-blue-600">${character.bank_balance?.toLocaleString() || '0'}</div>
                     </div>
                   </div>
                 </div>
               ))}
             </div>
           )}
         </div>
       )}

                                           {/* Character Selection Warning */}
         {characters.length === 0 && (
           <div className="mb-4 p-3 bg-red-600/20 rounded-lg border border-red-500/30 text-center">
             <p className="text-red-300">No characters found</p>
           </div>
         )}

        

                               {/* Rewards Grid */}
         <div className="grid grid-cols-7 gap-2 mb-4">
          {rewards.map((reward) => {
            const status = getRewardStatus(reward)
                         const canClaim = status === 'available' && selectedCharacter && reward.day === currentDay && !reward.claimed
            
            return (
              <div
                key={reward.day}
                className={`relative group transition-all duration-300 ${
                  status === 'claimed' 
                    ? 'opacity-60' 
                    : status === 'available' 
                      ? (canClaim ? 'cursor-pointer hover:scale-105' : 'opacity-40 cursor-not-allowed')
                      : 'opacity-40'
                }`}
                onClick={() => canClaim && claimReward(reward.day)}
              >
                               {/* Day Badge */}
                                   <div className={`absolute -top-2 -left-2 w-6 h-6 rounded-full flex items-center justify-center z-10 ${
                    reward.day === currentDay && status === 'available' 
                      ? 'bg-green-600 animate-pulse' 
                      : 'bg-blue-600'
                  }`}>
                   <span className="text-white text-xs font-bold">{reward.day}</span>
                 </div>
                 
                 {/* Current Day Label */}
                 {reward.day === currentDay && status === 'available' && (
                                     <div className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-green-600 text-white text-xs px-2 py-1 rounded font-bold whitespace-nowrap z-20">
                      CURRENT
                    </div>
                 )}

                             {/* Reward Card */}
                                                <div className={`
                   relative h-16 rounded-3xl border-2 transition-all duration-300
                                   ${status === 'claimed' 
                    ? 'bg-green-600/30 border-green-500/60' 
                    : status === 'available' 
                      ? (selectedCharacter 
                          ? 'bg-green-600/20 border-green-500 hover:border-green-400 hover:shadow-lg hover:shadow-green-500/25' 
                          : 'bg-gray-800/60 border-gray-600/50')
                      : 'bg-gray-800/40 border-gray-600/50'
                  }
               `}>
                                   {/* Tooltip for no character selected or wrong day */}
                  {status === 'available' && (!selectedCharacter || reward.day !== currentDay) && (
                    <div className="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-black/90 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-20">
                      {!selectedCharacter ? 'Select a character first' : `Day ${currentDay} must be claimed first`}
                      <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-black/90"></div>
                    </div>
                  )}
                                                                   {/* Icon */}
                                                        <div className="flex items-center justify-center h-full -mt-2">
                     {status === 'claimed' ? (
                       <CheckCircle className="w-7 h-7 text-green-600" />
                     ) : status === 'available' ? (
                       <DollarSign className="w-7 h-7 text-green-600" />
                     ) : (
                       <Lock className="w-5 h-5 text-gray-500" />
                     )}
                   </div>

                  {/* Money Amount */}
                  <div className="absolute bottom-2 left-1 right-1 text-center">
                  <div className={`
                    text-xs font-bold
                                         ${status === 'claimed' 
                       ? 'text-green-600' 
                       : status === 'available' 
                         ? 'text-green-600' 
                         : 'text-gray-500'
                     }
                  `}>
                    {formatMoney(reward.money)}
                  </div>
                </div>

                
              </div>

                             {/* Hover Effect */}
               {status === 'available' && (
                 <div className="absolute inset-0 bg-green-600/20 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
               )}
            </div>
          )
        })}
      </div>

      {/* Info & Progress */}
             <div className="bg-gray-800/80 rounded-3xl p-4 border border-gray-500/30">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center space-x-2">
                         <Calendar className="w-4 h-4 text-green-500" />
            <span className="text-gray-200 text-sm">Progress</span>
          </div>
          <span className="text-white font-medium">
            {rewards.filter(r => r.claimed).length}/7 days
          </span>
        </div>
        
        {/* Progress Bar */}
                 <div className="w-full bg-gray-800 rounded-full h-2">
           <div 
             className="bg-green-600 h-2 rounded-full transition-all duration-500"
             style={{ width: `${(rewards.filter(r => r.claimed).length / 7) * 100}%` }}
           />
         </div>

                                   {/* Next Reward Info */}
          {currentDay <= 7 && !rewards.find(r => r.day === currentDay)?.claimed && (
            <div className="mt-3 text-center">
                             <p className="text-green-600 text-sm font-medium">
                 Current Reward: {formatMoney(currentDay * 1000)} - Click Day {currentDay} to claim!
               </p>
            </div>
          )}

          {/* Cycle Completion Message */}
          {currentDay === 7 && rewards.find(r => r.day === 7)?.claimed && (
            <div className="mt-3 text-center">
                               <p className="text-green-600 text-sm font-medium">
                   Cycle Complete! Waiting 24h to restart...
                 </p>
            </div>
          )}

                     {/* Countdown Timer */}
           {timeUntilNextDay && (
             <div className="mt-3 text-center">
               <div className="flex items-center justify-center space-x-2">
                                   <Clock className="w-4 h-4 text-green-500" />
                  <p className="text-green-400 text-sm font-medium">
                   {currentDay === 7 ? timeUntilNextDay : `Next day unlocks in: ${timeUntilNextDay}`}
                 </p>
               </div>
             </div>
           )}

                 {/* Streak Info */}
         {lastClaimDate && (
           <div className="mt-2 text-center">
             <p className="text-gray-300 text-xs">
               Last claimed: {new Date(lastClaimDate).toLocaleDateString()}
             </p>
           </div>
         )}
      </div>

             {/* Success Message */}
       {showSuccess && lastReward && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
           <div className="bg-gradient-to-br from-green-600 to-green-700 rounded-2xl p-8 text-center shadow-2xl border border-green-500/30 max-w-md mx-4">
             <div className="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
               <CheckCircle className="w-10 h-10 text-green-400" />
             </div>
             <h3 className="text-2xl font-bold text-white mb-2">Reward Claimed!</h3>
             <p className="text-green-100 mb-4">
               Day {lastReward.day} reward of {formatMoney(lastReward.money)} has been added to
             </p>
             <div className="bg-green-500/20 rounded-lg p-3 mb-6 border border-green-400/30">
               <p className="text-white font-semibold text-lg">{lastReward.character}</p>
             </div>
             <button
               onClick={() => setShowSuccess(false)}
               className="px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium"
             >
               Awesome!
             </button>
           </div>
         </div>
       )}

       {/* Loading State */}
       {loading && (
         <div className="absolute inset-0 bg-black/50 rounded-xl flex items-center justify-center">
           <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500"></div>
         </div>
       )}
     </div>
   )
 }