<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import type { PublicStoreInfo, PublicStoreItem, StorePurchaseRequest, StorePurchaseResponse } from '@/types'
import { ShoppingCart, Package, Filter, X, AlertCircle, ExternalLink, Check } from 'lucide-vue-next'
import { safeCurrency } from '@/utils/formatters'

const route = useRoute()
const subdomain = computed(() => route.params.subdomain as string)

const isLoading = ref(false)
const storeInfo = ref<PublicStoreInfo | null>(null)
const items = ref<PublicStoreItem[]>([])
const selectedCategory = ref<string>('all')
const selectedItem = ref<PublicStoreItem | null>(null)
const showPurchaseModal = ref(false)
const steamId = ref('')
const playerName = ref('')
const isPurchasing = ref(false)
const purchaseError = ref('')
const storeError = ref('')

const categories = computed(() => {
  const cats = new Set(['all'])
  items.value.forEach(item => {
    if (item.category_name) {
      cats.add(item.category_name)
    }
  })
  return Array.from(cats).map(name => ({
    value: name,
    label: name === 'all' ? 'All Items' : name
  }))
})

const filteredItems = computed(() => {
  let result = items.value

  if (selectedCategory.value !== 'all') {
    result = result.filter(item => item.category_name === selectedCategory.value)
  }

  return result
})

async function loadStore() {
  isLoading.value = true
  storeError.value = ''
  try {
    // Fetch store info
    const infoResponse = await fetch(`/api/public-store/${subdomain.value}`)
    if (!infoResponse.ok) {
      const error = await infoResponse.json().catch(() => ({ message: 'Store not found' }))
      throw new Error(error.message || 'Failed to load store')
    }
    storeInfo.value = await infoResponse.json()

    // Fetch items
    const itemsResponse = await fetch(`/api/public-store/${subdomain.value}/items`)
    if (!itemsResponse.ok) {
      const error = await itemsResponse.json().catch(() => ({ message: 'Failed to load items' }))
      throw new Error(error.message || 'Failed to load items')
    }
    items.value = await itemsResponse.json()
  } catch (error: any) {
    storeError.value = error.message || 'Failed to load store'
    storeInfo.value = null
    items.value = []
  } finally {
    isLoading.value = false
  }
}

function openPurchaseModal(item: PublicStoreItem) {
  selectedItem.value = item
  showPurchaseModal.value = true
  steamId.value = ''
  playerName.value = ''
  purchaseError.value = ''
}

function closePurchaseModal() {
  showPurchaseModal.value = false
  selectedItem.value = null
  steamId.value = ''
  playerName.value = ''
  purchaseError.value = ''
}

function validateSteamId(): boolean {
  // Steam ID is 17 digits
  const steamIdRegex = /^\d{17}$/
  return steamIdRegex.test(steamId.value.trim())
}

async function confirmPurchase() {
  if (!selectedItem.value) return

  if (!validateSteamId()) {
    purchaseError.value = 'Invalid Steam ID. Must be 17 digits.'
    return
  }

  isPurchasing.value = true
  purchaseError.value = ''

  try {
    const payload: StorePurchaseRequest = {
      item_id: selectedItem.value.id,
      steam_id: steamId.value.trim(),
      player_name: playerName.value.trim() || 'Unknown Player'
    }

    const response = await fetch(`/api/public-store/${subdomain.value}/purchase`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    })

    if (!response.ok) {
      const error = await response.json().catch(() => ({ message: 'Purchase failed' }))
      throw new Error(error.message || 'Purchase failed')
    }

    const result: StorePurchaseResponse = await response.json()

    // Open PayPal approval URL in new window
    window.open(result.approval_url, '_blank', 'width=800,height=600')

    // Close modal and show success message
    closePurchaseModal()
    // TODO: Show toast notification
    alert('PayPal window opened. Complete your payment there. Your items will be delivered automatically after payment.')
  } catch (error: any) {
    purchaseError.value = error.message || 'Purchase failed. Please try again.'
  } finally {
    isPurchasing.value = false
  }
}

function formatPrice(price: number): string {
  return safeCurrency(price, '$')
}

function itemTypeBadgeClass(itemType: string): string {
  const colors: Record<string, string> = {
    kit: 'bg-blue-500/15 text-blue-400',
    rank: 'bg-purple-500/15 text-purple-400',
    currency: 'bg-green-500/15 text-green-400',
    custom_command: 'bg-orange-500/15 text-orange-400',
  }
  return colors[itemType] || 'bg-neutral-700/50 text-neutral-400'
}

onMounted(() => {
  loadStore()
})
</script>

<template>
  <div class="min-h-screen bg-gradient-to-b from-neutral-950 to-neutral-900">
    <!-- Header -->
    <div class="bg-neutral-950/80 backdrop-blur-sm border-b border-neutral-800 sticky top-0 z-10">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="flex items-center gap-3 mb-2">
          <ShoppingCart class="w-6 h-6 text-oxide-500" />
          <h1 class="text-3xl font-bold text-neutral-100">
            {{ storeInfo?.store_name || 'Server Store' }}
          </h1>
        </div>
        <p v-if="storeInfo?.description" class="text-neutral-400 max-w-3xl">
          {{ storeInfo.description }}
        </p>
      </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- Loading state -->
      <div v-if="isLoading" class="flex items-center justify-center py-20">
        <div class="text-center">
          <div class="inline-block w-8 h-8 border-4 border-oxide-500 border-t-transparent rounded-full animate-spin mb-4"></div>
          <p class="text-neutral-400">Loading store...</p>
        </div>
      </div>

      <!-- Error state -->
      <div v-else-if="storeError" class="bg-neutral-900 border border-neutral-800 rounded-lg p-12 text-center">
        <AlertCircle class="w-16 h-16 text-red-400 mx-auto mb-4" />
        <h2 class="text-2xl font-bold text-neutral-100 mb-2">Store Unavailable</h2>
        <p class="text-neutral-400 mb-6">{{ storeError }}</p>
        <button
          @click="loadStore"
          class="px-6 py-3 bg-oxide-600 hover:bg-oxide-700 text-white font-medium rounded-lg transition-colors"
        >
          Retry
        </button>
      </div>

      <!-- Store content -->
      <div v-else-if="storeInfo">
        <!-- Category filter -->
        <div v-if="categories.length > 1" class="mb-6 flex items-center gap-3">
          <Filter class="w-4 h-4 text-neutral-500" />
          <select
            v-model="selectedCategory"
            class="px-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-100 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
          >
            <option v-for="cat in categories" :key="cat.value" :value="cat.value">
              {{ cat.label }}
            </option>
          </select>
        </div>

        <!-- Items grid -->
        <div v-if="filteredItems.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <div
            v-for="item in filteredItems"
            :key="item.id"
            class="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden hover:border-oxide-500/50 transition-all group shadow-lg hover:shadow-oxide-500/10"
          >
            <!-- Item image -->
            <div class="relative h-48 bg-gradient-to-br from-neutral-800 to-neutral-900 overflow-hidden">
              <img
                v-if="item.image_url"
                :src="item.image_url"
                :alt="item.name"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <div v-else class="w-full h-full flex items-center justify-center">
                <Package class="w-16 h-16 text-neutral-700" />
              </div>
              <div v-if="item.category_name" class="absolute top-3 right-3">
                <span class="text-xs font-medium px-2.5 py-1 rounded-full bg-neutral-950/80 backdrop-blur-sm text-neutral-300 border border-neutral-700">
                  {{ item.category_name }}
                </span>
              </div>
            </div>

            <!-- Item details -->
            <div class="p-5 space-y-4">
              <div>
                <div class="flex items-start justify-between gap-2 mb-2">
                  <h3 class="text-lg font-bold text-neutral-100 group-hover:text-oxide-400 transition-colors">
                    {{ item.name }}
                  </h3>
                  <span class="text-xl font-bold text-oxide-400 shrink-0">
                    {{ formatPrice(item.price) }}
                  </span>
                </div>
                <p v-if="item.description" class="text-sm text-neutral-400 line-clamp-2 leading-relaxed">
                  {{ item.description }}
                </p>
              </div>

              <!-- Item type badge -->
              <div class="flex items-center gap-2">
                <span class="text-xs font-medium px-2 py-1 rounded" :class="itemTypeBadgeClass(item.item_type)">
                  {{ item.item_type.replace('_', ' ') }}
                </span>
              </div>

              <!-- Purchase limit indicator -->
              <div v-if="item.limit_per_player" class="text-xs text-neutral-500">
                Limited to {{ item.limit_per_player }} per player
              </div>

              <!-- Buy button -->
              <button
                @click="openPurchaseModal(item)"
                class="w-full py-3 text-sm font-semibold text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors shadow-lg shadow-oxide-500/20"
              >
                Buy Now
              </button>
            </div>
          </div>
        </div>

        <!-- Empty state -->
        <div v-else class="bg-neutral-900 border border-neutral-800 rounded-lg p-16 text-center">
          <Package class="w-16 h-16 text-neutral-600 mx-auto mb-4" />
          <h3 class="text-xl font-medium text-neutral-300 mb-2">No Items Available</h3>
          <p class="text-sm text-neutral-500">
            {{ selectedCategory === 'all' ? 'This store has no items at the moment.' : 'No items in this category.' }}
          </p>
        </div>
      </div>
    </div>

    <!-- Purchase Modal -->
    <div
      v-if="showPurchaseModal && selectedItem"
      class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4"
      @click.self="closePurchaseModal"
    >
      <div class="bg-neutral-900 border border-neutral-800 rounded-xl max-w-lg w-full shadow-2xl">
        <!-- Modal Header -->
        <div class="border-b border-neutral-800 px-6 py-5 flex items-start justify-between">
          <div class="flex-1">
            <h2 class="text-2xl font-bold text-neutral-100 mb-1">Complete Purchase</h2>
            <p class="text-sm text-neutral-400">You'll be redirected to PayPal to complete payment</p>
          </div>
          <button
            @click="closePurchaseModal"
            class="p-2 text-neutral-400 hover:text-neutral-200 rounded-lg transition-colors"
          >
            <X class="w-5 h-5" />
          </button>
        </div>

        <!-- Modal Body -->
        <div class="p-6 space-y-5">
          <!-- Item preview -->
          <div class="bg-neutral-800/50 border border-neutral-700 rounded-lg p-4 flex items-start gap-4">
            <div class="w-20 h-20 bg-neutral-800 rounded-lg overflow-hidden shrink-0">
              <img
                v-if="selectedItem.image_url"
                :src="selectedItem.image_url"
                :alt="selectedItem.name"
                class="w-full h-full object-cover"
              />
              <div v-else class="w-full h-full flex items-center justify-center">
                <Package class="w-8 h-8 text-neutral-600" />
              </div>
            </div>
            <div class="flex-1 min-w-0">
              <h3 class="text-lg font-semibold text-neutral-100 mb-1">{{ selectedItem.name }}</h3>
              <p v-if="selectedItem.description" class="text-sm text-neutral-400 line-clamp-2 mb-2">
                {{ selectedItem.description }}
              </p>
              <p class="text-2xl font-bold text-oxide-400">{{ formatPrice(selectedItem.price) }}</p>
            </div>
          </div>

          <!-- Steam ID input -->
          <div>
            <label class="block text-sm font-medium text-neutral-300 mb-2">
              Steam ID <span class="text-red-400">*</span>
            </label>
            <input
              v-model="steamId"
              type="text"
              placeholder="76561198012345678"
              maxlength="17"
              class="w-full px-4 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
              :class="{ 'border-red-500': purchaseError && !validateSteamId() }"
            />
            <p class="text-xs text-neutral-500 mt-1.5">
              Required for item delivery. Must be your 17-digit Steam ID.
            </p>
          </div>

          <!-- Player name input -->
          <div>
            <label class="block text-sm font-medium text-neutral-300 mb-2">
              Player Name (Optional)
            </label>
            <input
              v-model="playerName"
              type="text"
              placeholder="Your in-game name"
              class="w-full px-4 py-3 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
            />
          </div>

          <!-- Error message -->
          <div v-if="purchaseError" class="flex items-start gap-2 bg-red-500/10 border border-red-500/20 rounded-lg p-3">
            <AlertCircle class="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
            <p class="text-sm text-red-400">{{ purchaseError }}</p>
          </div>

          <!-- Legal disclaimer -->
          <div class="bg-neutral-800/30 border border-neutral-700 rounded-lg p-4">
            <p class="text-xs text-neutral-500 leading-relaxed space-y-1.5">
              <span class="flex items-start gap-1.5">
                <Check class="w-3 h-3 text-oxide-500 shrink-0 mt-0.5" />
                <span>Items will be delivered automatically to your in-game character after payment</span>
              </span>
              <span class="flex items-start gap-1.5">
                <Check class="w-3 h-3 text-oxide-500 shrink-0 mt-0.5" />
                <span>All purchases are final and non-refundable</span>
              </span>
              <span class="flex items-start gap-1.5">
                <Check class="w-3 h-3 text-oxide-500 shrink-0 mt-0.5" />
                <span>You must be logged into the server to receive items</span>
              </span>
            </p>
          </div>
        </div>

        <!-- Modal Footer -->
        <div class="border-t border-neutral-800 px-6 py-5 flex items-center justify-between gap-4">
          <button
            @click="closePurchaseModal"
            :disabled="isPurchasing"
            class="px-6 py-3 text-sm font-medium text-neutral-300 bg-neutral-800 hover:bg-neutral-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Cancel
          </button>
          <button
            @click="confirmPurchase"
            :disabled="isPurchasing || !steamId.trim()"
            class="flex items-center gap-2 px-8 py-3 text-sm font-semibold text-white bg-oxide-600 hover:bg-oxide-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-oxide-500/20"
          >
            <ExternalLink v-if="!isPurchasing" class="w-4 h-4" />
            <span>{{ isPurchasing ? 'Processing...' : 'Proceed to PayPal' }}</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <footer class="mt-16 py-8 border-t border-neutral-800">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-center gap-2 text-neutral-600 text-sm">
          <img src="/logo.png" alt="Corrosion" class="h-4 w-4 opacity-60" />
          <span>Powered by <span class="text-oxide-500 font-semibold">Corrosion</span></span>
        </div>
      </div>
    </footer>
  </div>
</template>
