import { Header } from '@/components/layout/Header'
import { Zap, Lock, CheckCircle, Gift, Star } from 'lucide-react'
import { useAuthStore } from '@/store'

const QUESTS = [
  {
    title: 'Place Your First Bet',
    description: 'Make any bet of $10 or more',
    reward: '100 Megadrop Points',
    completed: false
  },
  {
    title: 'Win 3 Bets in a Row',
    description: 'Build a winning streak',
    reward: '500 Megadrop Points',
    completed: false
  },
  {
    title: 'Refer a Friend',
    description: 'Invite someone who places a bet',
    reward: '250 Megadrop Points',
    completed: false
  },
  {
    title: 'Reach VIP Bronze',
    description: 'Earn 1,000 XP to unlock Bronze tier',
    reward: '1,000 Megadrop Points',
    completed: false
  },
  {
    title: 'Complete Daily Check-in',
    description: 'Log in 7 days in a row',
    reward: '300 Megadrop Points',
    completed: false
  }
]

export default function Megadrop() {
  const { user } = useAuthStore()

  return (
    <div className="min-h-screen bg-gray-50">
      <Header />

      {/* Hero Section */}
      <div className="bg-gradient-to-r from-yellow-600 to-orange-600 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="text-center max-w-3xl mx-auto">
            <div className="inline-flex items-center gap-2 bg-yellow-500/20 text-yellow-100 px-4 py-2 rounded-full mb-6">
              <Zap size={20} />
              <span className="font-medium">Megadrop</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              Lock Your Bets, Complete Quests, Earn Boosted Airdrops
            </h1>
            <p className="text-yellow-100 text-lg mb-8">
              Participate in Megadrop events to earn exclusive rewards. Lock your stakes, complete quests, and climb the leaderboard for massive airdrop bonuses.
            </p>
          </div>
        </div>
      </div>

      {/* Stats Bar */}
      <div className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="grid grid-cols-4 gap-6">
            <div className="text-center">
              <p className="text-2xl font-bold text-gray-900">$500K</p>
              <p className="text-sm text-gray-600">Total Airdrop Pool</p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold text-gray-900">12,345</p>
              <p className="text-sm text-gray-600">Participants</p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold text-gray-900">5 Days</p>
              <p className="text-sm text-gray-600">Time Remaining</p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold text-orange-600">{user ? '0' : '-'}</p>
              <p className="text-sm text-gray-600">Your Points</p>
            </div>
          </div>
        </div>
      </div>

      {/* Lock Section */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid md:grid-cols-2 gap-8">
          {/* Lock Bets */}
          <div className="bg-white rounded-xl shadow-sm p-6">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                <Lock className="text-orange-600" size={20} />
              </div>
              <div>
                <h3 className="font-bold text-gray-900">Lock Your Stake</h3>
                <p className="text-sm text-gray-600">Earn points based on locked amount</p>
              </div>
            </div>

            <div className="space-y-4">
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">Lock Amount</span>
                <span className="font-medium">$0.00</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">Lock Period</span>
                <span className="font-medium">30 Days</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">Daily Points</span>
                <span className="font-medium text-orange-600">0 pts/day</span>
              </div>
            </div>

            <button className="w-full mt-6 bg-orange-600 hover:bg-orange-700 text-white py-3 rounded-lg font-medium transition-colors">
              {user ? 'Lock Stakes' : 'Sign In to Lock'}
            </button>
          </div>

          {/* Your Rewards */}
          <div className="bg-white rounded-xl shadow-sm p-6">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                <Gift className="text-yellow-600" size={20} />
              </div>
              <div>
                <h3 className="font-bold text-gray-900">Your Rewards</h3>
                <p className="text-sm text-gray-600">Estimated airdrop based on points</p>
              </div>
            </div>

            <div className="text-center py-8">
              <p className="text-4xl font-bold text-gray-900">$0.00</p>
              <p className="text-gray-600 mt-2">Estimated Airdrop Value</p>
            </div>

            <div className="bg-gray-50 rounded-lg p-4">
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">Your Points</span>
                <span className="font-medium">0</span>
              </div>
              <div className="flex justify-between text-sm mt-2">
                <span className="text-gray-600">Your Rank</span>
                <span className="font-medium">{user ? '#-' : 'Sign in'}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Quests */}
      <div className="bg-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-8">Complete Quests for Bonus Points</h2>
          <div className="space-y-4">
            {QUESTS.map((quest, index) => (
              <div key={index} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                <div className="flex items-center gap-4">
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                    quest.completed ? 'bg-green-100' : 'bg-gray-200'
                  }`}>
                    {quest.completed ? (
                      <CheckCircle className="text-green-600" size={20} />
                    ) : (
                      <Star className="text-gray-400" size={16} />
                    )}
                  </div>
                  <div>
                    <h4 className="font-medium text-gray-900">{quest.title}</h4>
                    <p className="text-sm text-gray-600">{quest.description}</p>
                  </div>
                </div>
                <div className="text-right">
                  <span className="text-sm font-medium text-orange-600">{quest.reward}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
