<template>
  <div class="container mx-auto px-2 sm:px-4 py-4 sm:py-8">
    <!-- Page Header -->
    <div class="mb-8">
      <h1 class="text-3xl font-bold text-foreground">Market Dashboard</h1>
      <p class="text-muted-foreground mt-2">
        Manage your market activities as both a customer and merchant
      </p>
    </div>

    <!-- Dashboard Tabs -->
    <div class="mb-6 relative">
      <nav class="border-b border-border overflow-x-auto overflow-y-hidden [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
        <div class="flex space-x-4 sm:space-x-8 min-w-max">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            @click="activeTab = tab.id"
            :class="[
              'py-2 px-1 sm:px-2 border-b-2 font-medium text-xs sm:text-sm transition-colors whitespace-nowrap',
              activeTab === tab.id
                ? 'border-primary text-primary'
                : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground'
            ]"
          >
            <div class="flex items-center space-x-1.5 sm:space-x-2">
              <component :is="tab.icon" class="w-4 h-4 flex-shrink-0" />
              <span>{{ tab.name }}</span>
              <Badge v-if="tab.badge" variant="secondary" class="text-xs ml-1">
                {{ tab.badge }}
              </Badge>
            </div>
          </button>
        </div>
      </nav>
    </div>

    <!-- Tab Content -->
    <div class="min-h-[600px]">
      <!-- Overview Tab -->
      <div v-if="activeTab === 'overview'" class="space-y-6">
        <DashboardOverview />
      </div>

      <!-- My Orders Tab (Customer) -->
      <div v-else-if="activeTab === 'orders'" class="space-y-6">
        <OrderHistory />
      </div>

      <!-- My Store Tab (Merchant) -->
      <div v-else-if="activeTab === 'store'" class="space-y-6">
        <MerchantStore />
      </div>

      <!-- Settings Tab -->
      <div v-else-if="activeTab === 'settings'" class="space-y-6">
        <MarketSettings />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useMarketStore } from '@/modules/market/stores/market'
import { Badge } from '@/components/ui/badge'
import { 
  BarChart3, 
  Package, 
  Store, 
  Settings,

} from 'lucide-vue-next'
import DashboardOverview from '../components/DashboardOverview.vue'
import OrderHistory from '../components/OrderHistory.vue'
import MerchantStore from '../components/MerchantStore.vue'
import MarketSettings from '../components/MarketSettings.vue'
import { auth } from '@/composables/useAuthService'

const marketStore = useMarketStore()

// Local state
const activeTab = ref('overview')

// Computed properties for tab badges
const orderCount = computed(() => {
  // Count orders where current user is the buyer
  const currentUserPubkey = auth.currentUser?.value?.pubkey
  if (!currentUserPubkey) return 0
  
  return Object.values(marketStore.orders).filter(order => 
    order.buyerPubkey === currentUserPubkey
  ).length
})

const pendingOrders = computed(() => {
  // Count pending orders where current user is the seller
  const currentUserPubkey = auth.currentUser?.value?.pubkey
  if (!currentUserPubkey) return 0
  
  return Object.values(marketStore.orders).filter(order => 
    order.sellerPubkey === currentUserPubkey && order.status === 'pending'
  ).length
})
// const pendingPayments = computed(() => 
//   Object.values(marketStore.orders).filter(o => o.paymentStatus === 'pending').length
// )

// Dashboard tabs
const tabs = computed(() => [
  {
    id: 'overview',
    name: 'Overview',
    icon: BarChart3,
    badge: null
  },
  {
    id: 'orders',
    name: 'My Orders',
    icon: Package,
    badge: orderCount.value > 0 ? orderCount.value : null
  },
  {
    id: 'store',
    name: 'My Store',
    icon: Store,
    badge: pendingOrders.value > 0 ? pendingOrders.value : null
  },
  {
    id: 'settings',
    name: 'Settings',
    icon: Settings,
    badge: null
  }
])

// Lifecycle
onMounted(() => {
  console.log('Market Dashboard mounted')
})
</script>

