<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold mb-4">Market Loading Test</h1>
    
    <div class="space-y-4">
      <div>
        <strong>Loading State:</strong> {{ marketStore.isLoading }}
      </div>
      
      <div>
        <strong>Error State:</strong> {{ marketStore.error }}
      </div>
      
      <div>
        <strong>Connected:</strong> {{ market.isConnected }}
      </div>
      
      <div>
        <strong>Active Market:</strong> {{ marketStore.activeMarket ? 'Yes' : 'No' }}
      </div>
      
      <div>
        <strong>Products Count:</strong> {{ marketStore.products.length }}
      </div>
      
      <div>
        <strong>Stalls Count:</strong> {{ marketStore.stalls.length }}
      </div>
      
      <Button @click="testLoadMarket" :disabled="marketStore.isLoading">
        {{ marketStore.isLoading ? 'Loading...' : 'Test Load Market' }}
      </Button>
      
      <Button @click="clearError" variant="outline">
        Clear Error
      </Button>
    </div>
    
    <div v-if="marketStore.error" class="mt-4 p-4 bg-red-100 border border-red-400 rounded">
      <strong>Error:</strong> {{ marketStore.error }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { useMarketStore } from '@/stores/market'
import { useMarket } from '@/composables/useMarket'
import { config } from '@/lib/config'
import { Button } from '@/components/ui/button'

const marketStore = useMarketStore()
const market = useMarket()

const testLoadMarket = async () => {
  try {
    console.log('=== Starting Market Test ===')
    
    const naddr = config.market.defaultNaddr
    console.log('Naddr:', naddr)
    
    if (!naddr) {
      marketStore.setError('No market naddr configured')
      return
    }
    
    console.log('Connecting to market...')
    await market.connectToMarket()
    console.log('Connected to market')
    
    console.log('Loading market...')
    await market.loadMarket(naddr)
    console.log('Market loaded')
    
    console.log('=== Market Test Complete ===')
    
  } catch (error) {
    console.error('Test failed:', error)
    marketStore.setError(error instanceof Error ? error.message : 'Test failed')
  }
}

const clearError = () => {
  marketStore.setError(null)
}
</script> 