import { Link } from 'react-router-dom'
import { useAuthStore } from '@/store'
import { RewardsLayout } from '@/components/layout/RewardsLayout'
import { Leaderboard, WhaleTracker, VIPProgress } from '@/components/gamification'
import { Trophy, Medal, Gift, Activity, ArrowRight } from 'lucide-react'

const QUICK_LINKS = [
  { path: '/rewards/leaderboard', label: 'Leaderboard', icon: Trophy, description: 'See top players and rankings' },
  { path: '/rewards/achievements', label: 'Achievements', icon: Medal, description: 'Track your progress and badges' },
  { path: '/rewards/airdrops', label: 'Airdrops', icon: Gift, description: 'Claim rewards and prizes' },
  { path: '/rewards/activity', label: 'Activity', icon: Activity, description: 'View recent wins and bets' },
]

export default function RewardsIndex() {
  const { isAuthenticated } = useAuthStore()

  return (
    <RewardsLayout
      title="Rewards & Leaderboards"
      subtitle="Level up, earn rewards, and compete with other players"
    >
      {/* Quick Links */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        {QUICK_LINKS.map((link) => {
          const Icon = link.icon
          return (
            <Link
              key={link.path}
              to={link.path}
              className="bg-white rounded-xl shadow-sm p-4 hover:shadow-md transition-shadow group"
            >
              <div className="flex items-center gap-3 mb-2">
                <div className="p-2 bg-primary/10 rounded-lg group-hover:bg-primary/20 transition-colors">
                  <Icon className="text-primary" size={24} />
                </div>
                <ArrowRight className="ml-auto text-gray-300 group-hover:text-primary transition-colors" size={20} />
              </div>
              <h3 className="font-semibold text-gray-900">{link.label}</h3>
              <p className="text-sm text-gray-500">{link.description}</p>
            </Link>
          )
        })}
      </div>

      {/* Main Content */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left Column - Personal Stats (if authenticated) */}
        {isAuthenticated ? (
          <div>
            <VIPProgress />
          </div>
        ) : (
          <div className="bg-white rounded-xl shadow-sm p-6 flex flex-col items-center justify-center text-center">
            <span className="text-5xl mb-4">🔒</span>
            <h3 className="text-xl font-bold text-gray-900 mb-2">Sign In to Track Progress</h3>
            <p className="text-gray-500 mb-4">
              Create an account to track your stats, earn achievements, and climb the leaderboard!
            </p>
            <Link
              to="/login"
              className="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg font-medium transition-colors"
            >
              Sign In
            </Link>
          </div>
        )}

        {/* Middle Column - Leaderboard */}
        <div>
          <Leaderboard />
        </div>

        {/* Right Column - Whale Tracker */}
        <div>
          <WhaleTracker />
        </div>
      </div>

      {/* VIP Benefits Info */}
      <div className="mt-8 bg-white rounded-xl shadow-sm p-6">
        <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
          <span>💡</span> How VIP Levels Work
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
          <div className="bg-gray-50 rounded-lg p-4 border">
            <p className="text-primary font-bold mb-1">🎯 Earn XP</p>
            <p className="text-gray-600">
              Place bets, win, and complete achievements to earn XP and level up your VIP status.
            </p>
          </div>
          <div className="bg-gray-50 rounded-lg p-4 border">
            <p className="text-primary font-bold mb-1">📉 Lower Fees</p>
            <p className="text-gray-600">
              Higher VIP levels mean lower house fees! Start at 10% and work your way down to 5%.
            </p>
          </div>
          <div className="bg-gray-50 rounded-lg p-4 border">
            <p className="text-primary font-bold mb-1">🪂 Unlock Rewards</p>
            <p className="text-gray-600">
              Earn airdrops, achievement badges, and exclusive perks as you climb the VIP ranks.
            </p>
          </div>
        </div>
      </div>
    </RewardsLayout>
  )
}
