The_Vibe/packages/web/src/app/orders/page.tsx

'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { api } from '@/lib/api'

interface Order {
  id: string
  order_number: number
  status: string
  total_customer_pays: number
  created_at: string
  delivered_at: string | null
  restaurant_name: string
  logo_url: string | null
}

const STATUS_LABELS: Record<string, string> = {
  pending: 'Placing order',
  confirmed: 'Confirmed',
  preparing: 'Being prepared',
  ready_for_pickup: 'Ready for pickup',
  driver_assigned: 'Driver on the way',
  picked_up: 'Out for delivery',
  delivered: 'Delivered',
  cancelled: 'Cancelled',
}

const STATUS_STYLES: Record<string, string> = {
  pending: 'text-amber-600',
  confirmed: 'text-blue-600',
  preparing: 'text-purple-600',
  ready_for_pickup: 'text-orange-600',
  driver_assigned: 'text-teal-600',
  picked_up: 'text-teal-600',
  delivered: 'text-green-600',
  cancelled: 'text-red-500',
}

const ACTIVE_STATUSES = ['pending', 'confirmed', 'preparing', 'ready_for_pickup', 'driver_assigned', 'picked_up']

export default function OrdersPage() {
  const router = useRouter()
  const [orders, setOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const token = localStorage.getItem('vibe_token')
    if (!token) { router.replace('/login?redirect=/orders'); return }

    api.get('/orders/mine').then((r) => {
      setOrders(r.data || [])
    }).catch(() => {}).finally(() => setLoading(false))
  }, [])

  const activeOrders = orders.filter((o) => ACTIVE_STATUSES.includes(o.status))
  const pastOrders = orders.filter((o) => !ACTIVE_STATUSES.includes(o.status))

  return (
    <div className="min-h-screen bg-vibe-cream">
      {/* Header */}
      <div className="bg-white border-b border-slate-100 px-6 py-4">
        <div className="max-w-lg mx-auto flex items-center gap-3">
          <button onClick={() => router.back()} className="text-slate-400 hover:text-vibe-dark text-lg">←</button>
          <h1 className="font-bold text-vibe-dark">My Orders</h1>
        </div>
      </div>

      <div className="max-w-lg mx-auto px-4 py-6 space-y-6">
        {loading ? (
          <div className="space-y-3">
            {[...Array(4)].map((_, i) => <div key={i} className="bg-white rounded-2xl h-20 animate-pulse" />)}
          </div>
        ) : orders.length === 0 ? (
          <div className="text-center py-20">
            <div className="text-5xl mb-4">🍔</div>
            <h3 className="font-bold text-vibe-dark text-lg mb-2">No orders yet</h3>
            <p className="text-slate-500 text-sm mb-6">Your order history will appear here.</p>
            <Link href="/restaurants" className="bg-vibe-teal text-white px-6 py-3 rounded-xl font-semibold hover:bg-teal-700 transition">
              Browse Restaurants →
            </Link>
          </div>
        ) : (
          <>
            {activeOrders.length > 0 && (
              <section>
                <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wide mb-3">In Progress</h2>
                <div className="space-y-3">
                  {activeOrders.map((order) => (
                    <OrderCard key={order.id} order={order} active />
                  ))}
                </div>
              </section>
            )}

            {pastOrders.length > 0 && (
              <section>
                <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wide mb-3">Past Orders</h2>
                <div className="space-y-3">
                  {pastOrders.map((order) => (
                    <OrderCard key={order.id} order={order} active={false} />
                  ))}
                </div>
              </section>
            )}
          </>
        )}
      </div>
    </div>
  )
}

function OrderCard({ order, active }: { order: Order; active: boolean }) {
  const date = new Date(order.created_at).toLocaleDateString('en-CA', {
    month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
  })

  return (
    <Link
      href={active ? `/orders/${order.id}/track` : `/orders/${order.id}/track`}
      className={`block bg-white rounded-2xl border p-4 hover:border-vibe-teal/40 transition ${
        active ? 'border-vibe-teal/30 shadow-sm' : 'border-slate-100'
      }`}
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 bg-slate-100 rounded-xl flex items-center justify-center text-xl">
            {order.logo_url ? (
              <img src={order.logo_url} alt="" className="w-10 h-10 rounded-xl object-cover" />
            ) : '🍽️'}
          </div>
          <div>
            <p className="font-semibold text-vibe-dark">{order.restaurant_name}</p>
            <p className="text-xs text-slate-400">#{order.order_number} · {date}</p>
          </div>
        </div>
        <div className="text-right">
          <p className="font-bold text-vibe-dark">${Number(order.total_customer_pays).toFixed(2)}</p>
          <p className={`text-xs font-medium ${STATUS_STYLES[order.status] || 'text-slate-500'}`}>
            {STATUS_LABELS[order.status] || order.status}
          </p>
        </div>
      </div>

      {active && (
        <div className="mt-3 flex items-center justify-between">
          <div className="flex-1 bg-slate-100 rounded-full h-1.5">
            <div
              className="bg-vibe-teal h-1.5 rounded-full transition-all"
              style={{ width: `${getProgress(order.status)}%` }}
            />
          </div>
          <span className="ml-3 text-xs text-vibe-teal font-medium whitespace-nowrap">Track →</span>
        </div>
      )}
    </Link>
  )
}

function getProgress(status: string): number {
  const steps: Record<string, number> = {
    pending: 10, confirmed: 25, preparing: 50,
    ready_for_pickup: 65, driver_assigned: 75, picked_up: 88, delivered: 100,
  }
  return steps[status] || 0
}