import { useAuthStore } from '@/store'
import { Link } from 'react-router-dom'
import { RewardsLayout } from '@/components/layout/RewardsLayout'
import { Airdrops, VIPProgress } from '@/components/gamification'

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

  return (
    <RewardsLayout
      title="Airdrops"
      subtitle="Claim your rewards and prizes"
    >
      {isAuthenticated ? (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2">
            <Airdrops />

            {/* How to earn airdrops */}
            <div className="mt-6 bg-white rounded-xl shadow-sm p-6">
              <h3 className="text-lg font-bold text-gray-900 mb-4">How to Earn Airdrops</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="flex items-start gap-3">
                  <span className="text-2xl">⬆️</span>
                  <div>
                    <p className="font-medium text-gray-900">Level Up VIP</p>
                    <p className="text-sm text-gray-500">Reach a new VIP level to earn an airdrop</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <span className="text-2xl">🎖️</span>
                  <div>
                    <p className="font-medium text-gray-900">Achievements</p>
                    <p className="text-sm text-gray-500">Unlock achievements for bonus airdrops</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <span className="text-2xl">📅</span>
                  <div>
                    <p className="font-medium text-gray-900">Daily Rewards</p>
                    <p className="text-sm text-gray-500">Log in daily to earn streak rewards</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <span className="text-2xl">🔥</span>
                  <div>
                    <p className="font-medium text-gray-900">Win Streaks</p>
                    <p className="text-sm text-gray-500">Build winning streaks for rare airdrops</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <VIPProgress />
          </div>
        </div>
      ) : (
        <div className="bg-white rounded-xl shadow-sm p-8 text-center max-w-md mx-auto">
          <span className="text-6xl mb-4 block">🔒</span>
          <h3 className="text-xl font-bold text-gray-900 mb-2">Sign In Required</h3>
          <p className="text-gray-500 mb-6">
            Sign in to view and claim your airdrops.
          </p>
          <Link
            to="/login"
            className="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg font-medium transition-colors inline-block"
          >
            Sign In
          </Link>
        </div>
      )}
    </RewardsLayout>
  )
}
