Airdrops & Rewards

<template>
  <div class="space-y-6">
    <!-- Airdrop Overview -->
    <AirdropChecker
      :wallet-address="userAddress"
      :protocols="supportedProtocols"
      @eligibility-found="handleEligibilityFound"
      @check-complete="handleCheckComplete"
    />

    <!-- Claimable Rewards -->
    <ClaimInterface
      v-if="claimableRewards.length"
      :rewards="claimableRewards"
      :gas-price="gasPrice"
      @claim="handleClaim"
      @batch-claim="handleBatchClaim"
    />

    <!-- Reward History -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <RewardTracker
        :rewards="allRewards"
        :total-claimed="totalClaimed"
        :pending-rewards="pendingRewards"
      />

      <VestingSchedule
        :vesting-positions="vestingTokens"
        :upcoming-unlocks="upcomingUnlocks"
        @claim-vested="handleClaimVested"
      />
    </div>

    <!-- Referral System -->
    <ReferralSystem
      v-if="referralEnabled"
      :user-code="userReferralCode"
      :referral-stats="referralStats"
      @generate-link="handleGenerateLink"
    />
  </div>
</template>

<script setup>
const userAddress = ref('0x742d35Cc6635C0532925a3b8f39ddc87')
const supportedProtocols = ref([
  'uniswap', 'arbitrum', 'optimism', 'polygon', 'apecoin'
])

const claimableRewards = ref([])
const allRewards = ref([])
const vestingTokens = ref([])
const referralEnabled = ref(true)

const handleEligibilityFound = (eligibility) => {
  console.log('Found eligibility:', eligibility)
  claimableRewards.value.push(eligibility)
}

const handleClaim = async (reward) => {
  console.log('Claiming reward:', reward)
  // Handle individual claim transaction
}

const handleBatchClaim = async (rewards) => {
  console.log('Batch claiming:', rewards)
  // Handle batch claim transaction
}

const handleClaimVested = async (vesting) => {
  console.log('Claiming vested tokens:', vesting)
  // Handle vested token claim
}
</script>

<template>
  <div class="space-y-4">
    <!-- Protocol Selection -->
    <div class="flex flex-wrap gap-2 mb-4">
      <UButton
        v-for="protocol in availableProtocols"
        :key="protocol.id"
        :variant="selectedProtocols.includes(protocol.id) ? 'solid' : 'outline'"
        size="xs"
        @click="toggleProtocol(protocol.id)"
      >
        <img :src="protocol.logo" class="w-4 h-4 mr-1" />
        {{ protocol.name }}
      </UButton>
    </div>

    <!-- Eligibility Results -->
    <AirdropChecker
      :protocols="selectedProtocols"
      :wallet-address="checkAddress"
      :deep-scan="true"
      @scan-progress="handleScanProgress"
    />

    <!-- Results Summary -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg">
        <h3 class="font-semibold text-green-700 dark:text-green-300">Eligible</h3>
        <p class="text-2xl font-bold text-green-600">{{ eligibleCount }}</p>
      </div>
      <div class="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-lg">
        <h3 class="font-semibold text-yellow-700 dark:text-yellow-300">Pending</h3>
        <p class="text-2xl font-bold text-yellow-600">{{ pendingCount }}</p>
      </div>
      <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
        <h3 class="font-semibold text-blue-700 dark:text-blue-300">Total Value</h3>
        <p class="text-2xl font-bold text-blue-600">${{ totalValue }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
const selectedProtocols = ref(['uniswap', 'arbitrum', 'optimism'])
const availableProtocols = ref([
  { id: 'uniswap', name: 'Uniswap', logo: '/protocols/uniswap.png' },
  { id: 'arbitrum', name: 'Arbitrum', logo: '/protocols/arbitrum.png' },
  // ... more protocols
])

const eligibleCount = ref(3)
const pendingCount = ref(2)
const totalValue = ref(4250.00)

const toggleProtocol = (protocolId) => {
  const index = selectedProtocols.value.indexOf(protocolId)
  if (index > -1) {
    selectedProtocols.value.splice(index, 1)
  } else {
    selectedProtocols.value.push(protocolId)
  }
}
</script>

<template>
  <ClaimInterface
    :rewards="claimableRewards"
    :gas-price="currentGasPrice"
    :gas-recommendations="gasRecommendations"
    @claim-optimized="handleOptimizedClaim"
  >
    <template #gas-optimizer>
      <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg mb-4">
        <h4 class="font-semibold mb-2">Gas Optimization</h4>
        <div class="space-y-2 text-sm">
          <div class="flex justify-between">
            <span>Current Gas Price:</span>
            <span class="font-mono">{{ currentGasPrice }} gwei</span>
          </div>
          <div class="flex justify-between">
            <span>Recommended Time:</span>
            <span class="text-green-600">{{ bestTime }}</span>
          </div>
          <div class="flex justify-between">
            <span>Potential Savings:</span>
            <span class="text-green-600">${{ gasSavings }}</span>
          </div>
        </div>
      </div>
    </template>
  </ClaimInterface>
</template>

<script setup>
const currentGasPrice = ref(25)
const bestTime = ref('Off-peak hours (2-6 AM UTC)')
const gasSavings = ref(12.50)

const handleOptimizedClaim = async (claimData) => {
  // Execute optimized claim with best timing
}
</script>

<template>
  <VestingSchedule
    :positions="vestingPositions"
    :visualization="'timeline'"
    :show-notifications="true"
    @setup-notifications="handleNotifications"
  >
    <template #timeline>
      <div class="relative">
        <!-- Vesting Timeline -->
        <div class="flex items-center space-x-4 overflow-x-auto py-4">
          <div
            v-for="(milestone, index) in vestingMilestones"
            :key="index"
            class="flex flex-col items-center min-w-[120px]"
          >
            <div
              :class="[
                'w-4 h-4 rounded-full border-2',
                milestone.unlocked ? 'bg-green-500 border-green-500' :
                milestone.upcoming ? 'bg-yellow-500 border-yellow-500' :
                'bg-gray-300 border-gray-300'
              ]"
            />
            <div class="text-xs mt-2 text-center">
              <div class="font-semibold">{{ milestone.amount }} tokens</div>
              <div class="text-gray-500">{{ milestone.date }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </VestingSchedule>
</template>

<script setup>
const vestingMilestones = ref([
  { amount: 1000, date: '2024-01-01', unlocked: true },
  { amount: 1000, date: '2024-04-01', unlocked: true },
  { amount: 1000, date: '2024-07-01', upcoming: true },
  { amount: 1000, date: '2024-10-01', upcoming: false }
])
</script>

<template>
  <div class="airdrop-portal space-y-8">
    <!-- Header Stats -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <StatCard
        title="Total Eligible"
        :value="stats.totalEligible"
        icon="i-lucide-gift"
        color="green"
      />
      <StatCard
        title="Total Claimed"
        :value="stats.totalClaimed"
        format="currency"
        icon="i-lucide-check-circle"
        color="blue"
      />
      <StatCard
        title="Pending Claims"
        :value="stats.pendingClaims"
        icon="i-lucide-clock"
        color="yellow"
      />
      <StatCard
        title="Vesting Unlocks"
        :value="stats.upcomingUnlocks"
        icon="i-lucide-unlock"
        color="purple"
      />
    </div>

    <!-- Main Content Tabs -->
    <UTabs :items="tabItems">
      <template #eligible>
        <AirdropChecker
          :wallet-address="userAddress"
          :protocols="allProtocols"
          auto-check
        />
      </template>

      <template #claim>
        <ClaimInterface
          :rewards="claimableRewards"
          enable-batch-claiming
          gas-optimization
        />
      </template>

      <template #vesting>
        <VestingSchedule
          :positions="vestingPositions"
          show-timeline
          enable-notifications
        />
      </template>

      <template #referrals>
        <ReferralSystem
          :user-stats="referralStats"
          :commission-history="commissionHistory"
        />
      </template>
    </UTabs>
  </div>
</template>