import { createFileRoute, useNavigate, Outlet, useLocation } from '@tanstack/react-router'
import { trpc } from '../lib/trpc-client'
import { p, AppContainer, div } from 'web-components'
import { Package, ChevronRight } from 'lucide-react'

export const Route = createFileRoute('/me/orders')({ component: OrdersPage })

function OrdersPage() {
  const navigate = useNavigate()
  const location = useLocation()
  const { data } = trpc.user.order.getOrders.useQuery({ page: 1, limit: 20 })
  const orders = data?.data || []

  // Check if we're on the exact /me/orders path (not a child route like /me/orders/123)
  const isExactOrdersPath = location.pathname === '/me/orders'

  return (
    <AppContainer>
      {isExactOrdersPath ? (
        <>
          <p className="font-bold mb-4 text-xl">
            My Orders
          </p>

          {orders.length === 0 ? (
            <div className="flex flex-col items-center gap-4 py-20">
              <Package className="h-12 w-12 text-gray-300" />
              <p className="text-gray-500">No orders yet</p>
            </div>
          ) : (
            <div className="flex flex-col gap-3">
              {orders.map((order: any) => (
                <div
                  key={order.id}
                  onClick={() =>
                    navigate({ to: '/me/orders/$id', params: { id: String(order.id) } })
                  }
                  className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm"
                >
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-semibold text-sm">
                        Order #{order.id}
                      </p>
                      <p className="text-xs text-gray-500">
                        {order.createdAt
                          ? new Date(order.createdAt).toLocaleDateString()
                          : ''}
                      </p>
                    </div>
                    <div className="flex items-center gap-2">
                      <span
                        className={`rounded-full px-2 py-0.5 text-xs font-medium ${
                          order.status === 'delivered'
                            ? 'bg-green-100 text-green-700'
                            : order.status === 'cancelled'
                              ? 'bg-red-100 text-red-700'
                              : 'bg-yellow-100 text-yellow-700'
                        }`}
                      >
                        {order.status}
                      </span>
                      <ChevronRight className="h-4 w-4 text-gray-400" />
                    </div>
                  </div>
                  <p className="mt-1 text-xs text-gray-400">
                    Total: ₹{order.totalAmount || 0}
                  </p>
                </div>
              ))}
            </div>
          )}
        </>
      ) : (
        /* Render child routes (order detail) when not on exact /me/orders path */
        <Outlet />
      )}
    </AppContainer>
  )
}
