'use client'

import { useEffect, useState, useCallback } from 'react'
import { Loader2, Package, Clock, CheckCircle2, ChefHat, AlertCircle, XCircle, Coffee } from 'lucide-react'
import { usePublicSSE } from '@/hooks/usePublicSSE'

const ORDER_ITEM_STATUS_DISPLAY: Record<string, { label: string; color: string; icon: any }> = {
  pending: { label: 'Menunggu', color: 'bg-yellow-100 text-yellow-700', icon: Clock },
  preparing: { label: 'Dimasak', color: 'bg-indigo-100 text-indigo-700', icon: ChefHat },
  ready: { label: 'Siap', color: 'bg-green-100 text-green-700', icon: CheckCircle2 },
  served: { label: 'Disajikan', color: 'bg-teal-100 text-teal-700', icon: Coffee },
  cancelled: { label: 'Dibatalkan', color: 'bg-red-100 text-red-700', icon: XCircle },
  unavailable: { label: 'Habis', color: 'bg-gray-100 text-gray-500', icon: AlertCircle },
}

const ORDER_STATUS_DISPLAY: Record<string, { label: string; color: string }> = {
  pending: { label: 'Menunggu', color: 'bg-yellow-100 text-yellow-800' },
  confirmed: { label: 'Dikonfirmasi', color: 'bg-blue-100 text-blue-800' },
  preparing: { label: 'Diproses', color: 'bg-indigo-100 text-indigo-800' },
  ready: { label: 'Siap', color: 'bg-green-100 text-green-800' },
  served: { label: 'Disajikan', color: 'bg-teal-100 text-teal-800' },
  completed: { label: 'Selesai', color: 'bg-gray-100 text-gray-800' },
  cancelled: { label: 'Dibatalkan', color: 'bg-red-100 text-red-800' },
}

function formatCurrency(amount: number | string): string {
  const num = typeof amount === 'string' ? parseFloat(amount) : amount
  return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(num)
}

interface MyOrdersProps {
  tenantSlug: string
  storeSlug: string
  sessionId: string
}

export default function MyOrders({ tenantSlug, storeSlug, sessionId }: MyOrdersProps) {
  const [orders, setOrders] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

  const fetchOrders = useCallback(async () => {
    try {
      const params = new URLSearchParams({ sessionId, tenantSlug, storeSlug })
      const res = await fetch(`/api/public/orders/status?${params}`)
      const data = await res.json()
      setOrders(data.orders || [])
    } catch {
      // silent
    } finally {
      setLoading(false)
    }
  }, [sessionId, tenantSlug, storeSlug])

  useEffect(() => {
    fetchOrders()
  }, [fetchOrders])

  // Real-time updates via SSE
  usePublicSSE({
    tenantSlug,
    storeSlug,
    onOrderUpdated: () => fetchOrders(),
    onOrderItemUpdated: () => fetchOrders(),
    enabled: !!sessionId,
  })

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="w-8 h-8 animate-spin text-primary-600" />
      </div>
    )
  }

  if (orders.length === 0) {
    return (
      <div className="text-center py-20 px-4">
        <Package className="w-16 h-16 text-gray-300 mx-auto mb-4" />
        <h3 className="text-lg font-medium text-gray-900 mb-1">Belum ada pesanan</h3>
        <p className="text-gray-500 text-sm">Pesanan Anda akan muncul di sini setelah Anda memesan</p>
      </div>
    )
  }

  return (
    <div className="space-y-4 px-4 py-4">
      {orders.map((order: any) => {
        const statusInfo = ORDER_STATUS_DISPLAY[order.status] || ORDER_STATUS_DISPLAY.pending
        return (
          <div key={order.id} className="bg-white rounded-xl shadow-sm overflow-hidden">
            {/* Order Header */}
            <div className="px-4 py-3 border-b border-gray-100">
              <div className="flex items-center justify-between">
                <div>
                  <span className="font-mono text-sm font-bold text-primary-600">{order.orderNumber}</span>
                  <div className="flex items-center gap-2 mt-0.5">
                    {order.table && <span className="text-xs text-gray-500">Meja {order.table.number}</span>}
                    <span className="text-xs text-gray-400">
                      {new Date(order.createdAt).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })}
                    </span>
                  </div>
                </div>
                <span className={`px-2.5 py-1 rounded-full text-xs font-medium ${statusInfo.color}`}>
                  {statusInfo.label}
                </span>
              </div>
            </div>

            {/* Order Items */}
            <div className="px-4 py-3 space-y-2">
              {order.items?.map((item: any) => {
                const itemStatus = ORDER_ITEM_STATUS_DISPLAY[item.status] || ORDER_ITEM_STATUS_DISPLAY.pending
                const isInactive = item.status === 'cancelled' || item.status === 'unavailable'
                const StatusIcon = itemStatus.icon

                return (
                  <div key={item.id} className={`flex items-center gap-3 ${isInactive ? 'opacity-50' : ''}`}>
                    <span className="w-6 h-6 bg-gray-100 rounded flex items-center justify-center text-xs font-bold text-gray-600 flex-shrink-0">
                      {item.quantity}
                    </span>
                    <div className="flex-1 min-w-0">
                      <span className={`text-sm ${isInactive ? 'line-through text-gray-400' : 'text-gray-900'}`}>
                        {item.menuItem?.name}
                      </span>
                      {item.selectedVariants?.length > 0 && (
                        <p className="text-xs text-gray-400">{item.selectedVariants.map((v: any) => v.name).join(', ')}</p>
                      )}
                    </div>
                    <div className="flex items-center gap-1.5 flex-shrink-0">
                      <StatusIcon className="w-3.5 h-3.5" />
                      <span className={`text-xs font-medium px-1.5 py-0.5 rounded ${itemStatus.color}`}>
                        {itemStatus.label}
                      </span>
                    </div>
                  </div>
                )
              })}
            </div>

            {/* Order Footer */}
            <div className="px-4 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
              <span className="text-sm text-gray-600">Total</span>
              <span className="text-sm font-bold text-gray-900">{formatCurrency(order.total)}</span>
            </div>
          </div>
        )
      })}
    </div>
  )
}