import { Suspense } from 'react';
import { notFound } from 'next/navigation';
import { getOrderById } from '@/lib/directQueries/dashboard';
import OrderDetails from '@/app/components/dashboard/OrderDetails';

interface OrderDetailsPageProps {
  params: Promise<{
    id: string;
  }>;
}

async function OrderDetailsContent({ id }: { id: string }) {
  let order;
  
  try {
    order = await getOrderById(id);
  } catch (error) {
    console.error('Error fetching order details:', error);
    notFound();
  }
  
  if (!order) {
    notFound();
  }
  
  return <OrderDetails order={order} />;
}

export default async function OrderDetailsPage({ params }: OrderDetailsPageProps) {
  const { id } = await params;
  
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Order Details</h1>
        <p className="text-sm text-gray-600 mt-1">
          View complete information about your order
        </p>
      </div>
      
      <Suspense fallback={
        <div className="flex items-center justify-center py-12">
          <div className="text-center">
            <div className="w-12 h-12 border-4 border-gray-200 border-t-[#0066FF] rounded-full animate-spin mx-auto mb-4" />
            <p className="text-gray-600">Loading order details...</p>
          </div>
        </div>
      }>
        <OrderDetailsContent id={id} />
      </Suspense>
    </div>
  );
}