import { createFileRoute, useNavigate } from '@tanstack/react-router'
import { Zap } from 'lucide-react'

export const Route = createFileRoute('/flash/order-success')({
  component: FlashOrderSuccessPage,
  validateSearch: (search: Record<string, string>) => ({
    orderId: search.orderId || '',
    totalAmount: search.totalAmount || '0',
  }),
})

function FlashOrderSuccessPage() {
  const navigate = useNavigate()
  const { orderId, totalAmount } = Route.useSearch()

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-6">
      <div className="flex h-20 w-20 items-center justify-center rounded-full bg-flash-25">
        <Zap className="h-10 w-10 text-flash-500" fill="currentColor" />
      </div>
      <p className="mb-2 mt-6 text-2xl font-extrabold text-gray-900">
        1 Hr Order Placed
      </p>
      <p className="mb-1 text-gray-600">Order ID: #{orderId}</p>
      <p className="mb-8 text-gray-600">Total: ₹{totalAmount}</p>
      <button
        onClick={() => navigate({ to: '/flash' })}
        className="mb-3 rounded-lg bg-flash-500 px-8 py-3 text-sm font-bold text-white transition-colors hover:bg-flash-600"
      >
        Continue Shopping
      </button>
      <button
        onClick={() => navigate({ to: '/me/orders' })}
        className="rounded-lg border border-gray-200 bg-white px-8 py-3 text-sm font-bold text-gray-700 transition-colors hover:bg-gray-100"
      >
        View My Orders
      </button>
    </div>
  )
}