<template>
  <div class="get-krk-view">
    <div class="get-krk-container">
      <h1 class="get-krk-title">Get $KRK Tokens</h1>

      <div class="balance-card">
        <div class="balance-label">Your KRK Balance</div>
        <div class="balance-amount">{{ formattedBalance }} $KRK</div>
      </div>

      <!-- Local dev: inline swap widget -->
      <div v-if="enableLocalSwap" class="swap-card">
        <div class="swap-explanation">
          <p>Swap ETH for $KRK directly against the local Uniswap pool.</p>
        </div>
        <LocalSwapWidget />
      </div>

      <!-- Production: link to Uniswap -->
      <div v-else class="swap-card">
        <div class="swap-explanation">
          <p>Swap ETH for $KRK on Uniswap, then stake your position to earn rewards.</p>
        </div>

        <a :href="uniswapUrl" target="_blank" rel="noopener noreferrer" class="swap-button">
          <span class="swap-button-icon">🔄</span>
          <span>Swap on Uniswap</span>
          <span class="swap-button-arrow">→</span>
        </a>

        <div class="swap-info">
          <div class="info-item">
            <span class="info-label">Network:</span>
            <span class="info-value">{{ networkName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">Token:</span>
            <span class="info-value">KRK</span>
          </div>
        </div>
      </div>

      <div class="next-steps">
        <h3>Next Steps</h3>
        <ol>
          <li v-if="enableLocalSwap">Swap ETH for $KRK using the widget above</li>
          <li v-else>Click the button above to open Uniswap</li>
          <li v-if="!enableLocalSwap">Swap ETH for $KRK tokens</li>
          <li>Return here and navigate to the Stake page</li>
          <li>Stake your $KRK to start earning</li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useWallet } from '@/composables/useWallet';
import { DEFAULT_CHAIN_ID, enableLocalSwap, getChain } from '@/config';
import LocalSwapWidget from '@/components/LocalSwapWidget.vue';

const wallet = useWallet();

const currentChainId = computed(() => wallet.account.chainId ?? DEFAULT_CHAIN_ID);
const chainData = computed(() => getChain(currentChainId.value));

// Format the balance for display
const formattedBalance = computed(() => {
  if (!wallet.balance?.value) {
    return '0.00';
  }
  const balance = Number(wallet.balance.formatted);
  return balance.toLocaleString('en-US', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 4,
  });
});

// Determine network name
const networkName = computed(() => {
  const chainId = currentChainId.value;
  switch (chainId) {
    case 84532:
      return 'Base Sepolia';
    case 8453:
      return 'Base';
    default:
      return `Chain ${chainId}`;
  }
});

// Build Uniswap URL with proper chain and token
const uniswapUrl = computed(() => {
  const chainId = currentChainId.value;
  const tokenAddress = chainData.value?.harb || '0xff196f1e3a895404d073b8611252cf97388773a7';

  // Map chainId to Uniswap chain identifier
  let chainName = 'base_sepolia';
  if (chainId === 8453) {
    chainName = 'base';
  } else if (chainId === 84532) {
    chainName = 'base_sepolia';
  }

  return `https://app.uniswap.org/swap?chain=${chainName}&outputCurrency=${tokenAddress}`;
});
</script>

<style lang="sass" scoped>
.get-krk-view
  min-height: calc(100vh - 200px)
  padding: 24px
  display: flex
  justify-content: center
  align-items: center

  @media (min-width: 768px)
    padding: 48px

.get-krk-container
  max-width: 600px
  width: 100%
  display: flex
  flex-direction: column
  gap: 32px

.get-krk-title
  font-size: 32px
  font-weight: 700
  text-align: center
  margin: 0
  color: #ffffff

  @media (min-width: 768px)
    font-size: 40px

.balance-card
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%)
  border: 1px solid #3a3a3a
  border-radius: 16px
  padding: 32px
  text-align: center

.balance-label
  font-size: 14px
  color: #a3a3a3
  margin-bottom: 8px
  text-transform: uppercase
  letter-spacing: 0.5px

.balance-amount
  font-size: 36px
  font-weight: 700
  color: #60a5fa

  @media (min-width: 768px)
    font-size: 48px

.swap-card
  background: #1a1a1a
  border: 1px solid #3a3a3a
  border-radius: 16px
  padding: 32px
  display: flex
  flex-direction: column
  gap: 24px

.swap-explanation
  text-align: center

  p
    margin: 0
    font-size: 16px
    line-height: 1.6
    color: #d4d4d4

.swap-button
  display: flex
  align-items: center
  justify-content: center
  gap: 12px
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)
  color: #ffffff
  font-size: 18px
  font-weight: 600
  padding: 20px 32px
  border-radius: 12px
  text-decoration: none
  transition: all 0.3s ease
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3)

  &:hover
    transform: translateY(-2px)
    box-shadow: 0 6px 16px rgba(96, 165, 250, 0.4)
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)

.swap-button-icon
  font-size: 24px

.swap-button-arrow
  font-size: 24px
  font-weight: 700

.swap-info
  display: flex
  flex-direction: column
  gap: 12px
  padding-top: 16px
  border-top: 1px solid #2a2a2a

.info-item
  display: flex
  justify-content: space-between
  align-items: center
  font-size: 14px

.info-label
  color: #a3a3a3

.info-value
  color: #ffffff
  font-weight: 500

.next-steps
  background: #1a1a1a
  border: 1px solid #3a3a3a
  border-radius: 16px
  padding: 32px

  h3
    margin: 0 0 16px 0
    font-size: 20px
    color: #ffffff

  ol
    margin: 0
    padding-left: 24px
    display: flex
    flex-direction: column
    gap: 12px

    li
      color: #d4d4d4
      line-height: 1.6
      padding-left: 8px
</style>
