<template>
  <div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
      <div>
        <h2 class="text-2xl font-bold text-foreground">My Orders</h2>
        <p class="text-muted-foreground mt-1">Track all your market orders and payments</p>
      </div>
      <div class="flex items-center gap-3">
        <!-- Order Events Status -->
        <div class="flex items-center gap-2 text-sm text-muted-foreground">
          <div class="w-2 h-2 rounded-full" :class="orderEvents.isSubscribed ? 'bg-green-500' : 'bg-yellow-500'"></div>
          <span>{{ orderEvents.isSubscribed ? 'Live updates' : 'Connecting...' }}</span>
        </div>
        <Button @click="navigateToMarket" variant="outline">
          <Store class="w-4 h-4 mr-2" />
          Browse Market
        </Button>
      </div>
    </div>

    <!-- Filters and Stats -->
    <div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
      <!-- Order Stats -->
      <div class="flex gap-4 text-sm">
        <div class="flex items-center gap-2">
          <span class="text-muted-foreground">Total:</span>
          <Badge variant="secondary">{{ totalOrders }}</Badge>
        </div>
        <div class="flex items-center gap-2">
          <span class="text-muted-foreground">Pending:</span>
          <Badge variant="outline" class="text-amber-600">{{ pendingOrders }}</Badge>
        </div>
        <div class="flex items-center gap-2">
          <span class="text-muted-foreground">Paid:</span>
          <Badge variant="outline" class="text-green-600">{{ paidOrders }}</Badge>
        </div>
        <div class="flex items-center gap-2">
          <span class="text-muted-foreground">Payment Due:</span>
          <Badge variant="outline" class="text-red-600">{{ pendingPayments }}</Badge>
        </div>
      </div>

      <!-- Filter Controls -->
      <div class="flex gap-2">
        <select v-model="statusFilter"
          class="px-3 py-2 border border-input rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring bg-background text-foreground">
          <option value="">All Statuses</option>
          <option value="pending">Pending</option>
          <option value="paid">Paid</option>
          <option value="processing">Processing</option>
          <option value="shipped">Shipped</option>
          <option value="delivered">Delivered</option>
          <option value="cancelled">Cancelled</option>
        </select>
        <select v-model="sortBy"
          class="px-3 py-2 border border-input rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring bg-background text-foreground">
          <option value="createdAt">Date Created</option>
          <option value="total">Order Total</option>
          <option value="status">Status</option>
        </select>
      </div>
    </div>

    <!-- Orders List -->
    <div v-if="filteredOrders.length > 0" class="space-y-4">
      <div v-for="order in sortedOrders" :key="order.id"
        class="bg-card border rounded-lg p-6 hover:shadow-md transition-shadow">
                <!-- Order Header -->
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-4">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
              <Package class="w-5 h-5 text-primary" />
            </div>
            <div>
              <h3 class="font-semibold text-foreground">Order #{{ order.id.slice(-8) }}</h3>
              <p class="text-sm text-muted-foreground">
                {{ formatDate(order.createdAt) }}
              </p>
            </div>
          </div>
          
          <div class="flex items-center gap-3">
            <Badge :variant="getStatusVariant(order.status)" :class="getStatusColor(order.status)">
              {{ formatStatus(order.status) }}
            </Badge>
            <div class="text-right">
              <p class="text-lg font-semibold text-foreground">
                {{ formatPrice(order.total, order.currency) }}
              </p>
            </div>
          </div>
        </div>

        <!-- Order Items -->
        <div class="mb-4">
          <h4 class="font-medium text-foreground mb-2">Items</h4>
          <div class="space-y-1">
            <div v-for="item in order.items.slice(0, 3)" :key="item.productId" class="text-sm text-muted-foreground">
              {{ item.productName }} × {{ item.quantity }}
            </div>
            <div v-if="order.items.length > 3" class="text-sm text-muted-foreground">
              +{{ order.items.length - 3 }} more items
            </div>
          </div>
        </div>

        <!-- Payment Section -->
        <div v-if="order.paymentRequest" class="mb-4 p-4 bg-muted/50 border border-border rounded-lg">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-2">
              <Zap class="w-4 h-4 text-yellow-500" />
              <span class="font-medium text-foreground">Payment Required</span>
            </div>
            <Badge :variant="order.paymentStatus === 'paid' ? 'default' : 'secondary'" class="text-xs"
              :class="order.paymentStatus === 'paid' ? 'text-green-600' : 'text-amber-600'">
              {{ order.paymentStatus === 'paid' ? 'Paid' : 'Pending' }}
            </Badge>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- Payment Details -->
            <div class="space-y-3">
              <!-- Payment Request -->
              <div>
                <label class="block text-xs font-medium text-muted-foreground mb-1">
                  Payment Request
                </label>
                <div class="flex items-center gap-2">
                  <input :value="order.paymentRequest || ''" readonly disabled
                    class="flex-1 font-mono text-xs bg-muted border border-input rounded-md px-3 py-1 text-foreground" />
                  <Button @click="copyPaymentRequest(order.paymentRequest || '')" variant="outline" size="sm">
                    <Copy class="w-3 h-3" />
                  </Button>
                </div>
              </div>
              
              <!-- Payment Actions -->
              <div class="flex gap-2">
                <Button @click="payWithLightning(order)" variant="default" size="sm"
                  class="flex-1" :disabled="!order.paymentRequest || isPayingWithWallet">
                  <Zap class="w-3 h-3 mr-1" />
                  {{ isPayingWithWallet ? 'Paying...' : hasWalletWithBalance ? 'Pay with Wallet' : 'Pay with Lightning' }}
                </Button>
                <Button @click="toggleQRCode(order.id)" variant="outline" size="sm">
                  <QrCode class="w-3 h-3" />
                  {{ order.showQRCode ? 'Hide QR' : 'Show QR' }}
                </Button>
              </div>
            </div>

            <!-- QR Code -->
            <div v-if="order.showQRCode" class="flex justify-center">
              <div class="w-48 h-48">
                <div v-if="order.qrCodeDataUrl && !order.qrCodeError" class="w-full h-full">
                  <img :src="order.qrCodeDataUrl"
                    :alt="`QR Code for ${formatPrice(order.total, order.currency)} payment`"
                    class="w-full h-full border border-border rounded-lg" />
                </div>
                <div v-else-if="order.qrCodeLoading"
                  class="w-full h-full bg-muted rounded-lg flex items-center justify-center">
                  <div class="text-center text-muted-foreground">
                    <div class="text-4xl mb-2 animate-pulse">⚡</div>
                    <div class="text-sm">Generating QR...</div>
                  </div>
                </div>
                <div v-else class="w-full h-full bg-muted rounded-lg flex items-center justify-center">
                  <div class="text-center text-muted-foreground">
                    <div class="text-4xl mb-2">⚡</div>
                    <div class="text-sm">No QR</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Waiting for Invoice -->
        <div v-else-if="order.status === 'pending'" class="mb-4 p-4 bg-muted/50 border border-border rounded-lg">
          <div class="flex items-center gap-2 mb-2">
            <div class="w-2 h-2 bg-amber-500 rounded-full animate-pulse"></div>
            <span class="font-medium text-foreground">Waiting for Payment Invoice</span>
          </div>
          <p class="text-sm text-muted-foreground">
            The merchant will send you a Lightning invoice via Nostr once they process your order
          </p>
        </div>

        <!-- Actions -->
        <div class="flex justify-end gap-2 pt-4 border-t border-border">
          <Button v-if="order.status === 'pending'" variant="outline" size="sm" @click="cancelOrder(order.id)">
            Cancel Order
          </Button>
          <Button variant="outline" size="sm" @click="copyOrderId(order.id)">
            Copy Order ID
          </Button>
        </div>
      </div>
    </div>

    <!-- Debug Information (Development Only) -->
    <div v-if="isDevelopment" class="mt-8 p-4 bg-gray-100 rounded-lg">
      <h4 class="font-medium mb-2">Debug Information</h4>
      <div class="text-sm space-y-1">
        <div>Total Orders in Store: {{ Object.keys(marketStore.orders).length }}</div>
        <div>Filtered Orders: {{ filteredOrders.length }}</div>
        <div>Order Events Subscribed: {{ orderEvents.isSubscribed ? 'Yes' : 'No' }}</div>
        <div>Relay Hub Connected: {{ relayHub.isConnected ? 'Yes' : 'No' }}</div>
        <div>Auth Status: {{ auth.isAuthenticated ? 'Authenticated' : 'Not Authenticated' }}</div>
        <div>Current User: {{ auth.currentUser?.value?.pubkey ? 'Yes' : 'No' }}</div>
      </div>
    </div>

    <!-- Empty State -->
    <div v-else class="text-center py-12">
      <div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
        <Package class="w-8 h-8 text-muted-foreground" />
      </div>
      <h3 class="text-lg font-medium text-foreground mb-2">No orders yet</h3>
      <p class="text-muted-foreground mb-6">
        Start shopping in the market to see your order history here
      </p>
      <Button @click="navigateToMarket" variant="default">
        Browse Market
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useMarketStore } from '../stores/market'
// import { useOrderEvents } from '@/composables/useOrderEvents' // TODO: Move to market module
import { injectService, SERVICE_TOKENS } from '@/core/di-container'
import { auth } from '@/composables/useAuth'
import { useLightningPayment } from '../composables/useLightningPayment'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Package, Store, Zap, Copy, QrCode } from 'lucide-vue-next'
import { toast } from 'vue-sonner'
import type { OrderStatus } from '@/stores/market'

const router = useRouter()
const marketStore = useMarketStore()
const relayHub = injectService(SERVICE_TOKENS.RELAY_HUB)
const { handlePayment, isPayingWithWallet, hasWalletWithBalance } = useLightningPayment()

// const orderEvents = useOrderEvents() // TODO: Move to market module
const orderEvents = { 
  isSubscribed: ref(false), 
  subscribeToOrderEvents: () => {}, 
  cleanup: () => {},
  initialize: () => {
    console.log('OrderEvents mock initialize called')
    orderEvents.isSubscribed.value = true
  }
} // Temporary mock

// Local state
const statusFilter = ref('')
const sortBy = ref('createdAt')

// Computed properties
const allOrders = computed(() => Object.values(marketStore.orders))

const filteredOrders = computed(() => {
  if (!statusFilter.value) return allOrders.value
  return allOrders.value.filter(order => order.status === statusFilter.value)
})

const sortedOrders = computed(() => {
  const orders = [...filteredOrders.value]

  switch (sortBy.value) {
    case 'total':
      return orders.sort((a, b) => b.total - a.total)
    case 'status':
      return orders.sort((a, b) => a.status.localeCompare(b.status))
    case 'createdAt':
    default:
      return orders.sort((a, b) => b.createdAt - a.createdAt)
  }
})

const totalOrders = computed(() => allOrders.value.length)
const pendingOrders = computed(() => allOrders.value.filter(o => o.status === 'pending').length)
const paidOrders = computed(() => allOrders.value.filter(o => o.status === 'paid').length)
const pendingPayments = computed(() => allOrders.value.filter(o => o.paymentStatus === 'pending').length)

const isDevelopment = computed(() => import.meta.env.DEV)

// Methods
const formatDate = (timestamp: number) => {
  return new Date(timestamp * 1000).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const formatStatus = (status: OrderStatus) => {
  const statusMap: Record<OrderStatus, string> = {
    pending: 'Pending',
    paid: 'Paid',
    processing: 'Processing',
    shipped: 'Shipped',
    delivered: 'Delivered',
    cancelled: 'Cancelled'
  }
  return statusMap[status] || status
}

const getStatusVariant = (status: OrderStatus) => {
  const variantMap: Record<OrderStatus, 'default' | 'secondary' | 'outline' | 'destructive'> = {
    pending: 'outline',
    paid: 'secondary',
    processing: 'secondary',
    shipped: 'default',
    delivered: 'default',
    cancelled: 'destructive'
  }
  return variantMap[status] || 'outline'
}

const getStatusColor = (status: OrderStatus) => {
  const colorMap: Record<OrderStatus, string> = {
    pending: 'text-amber-600',
    paid: 'text-green-600',
    processing: 'text-blue-600',
    shipped: 'text-blue-600',
    delivered: 'text-green-600',
    cancelled: 'text-red-600'
  }
  return colorMap[status] || 'text-muted-foreground'
}

const formatPrice = (price: number, currency: string) => {
  return marketStore.formatPrice(price, currency)
}

const cancelOrder = (orderId: string) => {
  // TODO: Implement order cancellation
  console.log('Cancelling order:', orderId)
}

const copyOrderId = async (orderId: string) => {
  try {
    await navigator.clipboard.writeText(orderId)
    toast.success('Order ID copied to clipboard')
    console.log('Order ID copied to clipboard')
  } catch (err) {
    console.error('Failed to copy order ID:', err)
    toast.error('Failed to copy order ID')
  }
}

const copyPaymentRequest = async (paymentRequest: string) => {
  console.log('Copying payment request:', {
    paymentRequest: paymentRequest?.substring(0, 50) + '...',
    hasValue: !!paymentRequest,
    length: paymentRequest?.length
  })

  if (!paymentRequest) {
    toast.error('No payment request available', {
      description: 'Please wait for the merchant to send the payment request'
    })
    return
  }

  try {
    await navigator.clipboard.writeText(paymentRequest)
    toast.success('Payment request copied to clipboard', {
      description: 'You can now paste it into your Lightning wallet'
    })
    console.log('Payment request copied to clipboard')
  } catch (err) {
    console.error('Failed to copy payment request:', err)
    toast.error('Failed to copy payment request', {
      description: 'Please try again or copy manually'
    })
  }
}

const payWithLightning = async (order: any) => {
  try {
    await handlePayment(order.paymentRequest, order.id)
  } catch (error) {
    console.error('Payment failed:', error)
  }
}

const toggleQRCode = async (orderId: string) => {
  // Toggle QR code visibility for the order
  const order = marketStore.orders[orderId]
  if (order) {
    // If showing QR code and it doesn't exist yet, generate it
    if (!order.showQRCode && order.lightningInvoice?.bolt11 && !order.qrCodeDataUrl) {
      await generateQRCode(orderId, order.lightningInvoice.bolt11)
    }

    marketStore.updateOrder(orderId, {
      showQRCode: !order.showQRCode
    })
  }
}

const generateQRCode = async (orderId: string, bolt11: string) => {
  try {
    // Set loading state
    marketStore.updateOrder(orderId, {
      qrCodeLoading: true,
      qrCodeError: null
    })

    // Import QRCode library dynamically
    const QRCode = await import('qrcode')

    // Generate QR code
    const qrCodeDataUrl = await QRCode.toDataURL(bolt11, {
      width: 192,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    })

    // Update order with QR code
    marketStore.updateOrder(orderId, {
      qrCodeDataUrl,
      qrCodeLoading: false,
      qrCodeError: null
    })

    console.log('QR code generated for order:', orderId)
  } catch (error) {
    console.error('Failed to generate QR code:', error)
    marketStore.updateOrder(orderId, {
      qrCodeLoading: false,
      qrCodeError: error instanceof Error ? error.message : 'Failed to generate QR code'
    })
  }
}

const navigateToMarket = () => router.push('/market')

// Load orders on mount
onMounted(() => {
  // Orders are already loaded in the market store
  console.log('Order History component loaded with', allOrders.value.length, 'orders')
  console.log('Market store orders:', marketStore.orders)

  // Debug: Log order details for orders with payment requests
  allOrders.value.forEach(order => {
    if (order.paymentRequest) {
      console.log('Order with payment request:', {
        id: order.id,
        paymentRequest: order.paymentRequest.substring(0, 50) + '...',
        hasPaymentRequest: !!order.paymentRequest,
        status: order.status,
        paymentStatus: order.paymentStatus
      })
    }
  })

  console.log('Order events status:', orderEvents.isSubscribed.value)
  console.log('Relay hub connected:', relayHub.isConnected.value)
  console.log('Auth status:', auth.isAuthenticated)
  console.log('Current user:', auth.currentUser?.value?.pubkey)

  // Start listening for order events if not already listening
  if (!orderEvents.isSubscribed.value) {
    console.log('Starting order events listener...')
    orderEvents.initialize()
  } else {
    console.log('Order events already listening')
  }
})

// Watch for authentication and relay hub readiness
watch(
  [() => auth.isAuthenticated, () => relayHub.isConnected.value],
  ([isAuth, isConnected]) => {
    if (isAuth && isConnected && !orderEvents.isSubscribed.value) {
      console.log('Auth and relay hub ready, starting order events listener...')
      orderEvents.initialize()
    }
  },
  { immediate: true }
)
</script>
