import { notFound } from "next/navigation";
import { requireCurrentUser } from "@/lib/auth";
import { getOrderById, updateOrder } from "@/app/actions/orders";
import { Navbar } from "@/components/Navbar";
import { OrderForm } from "@/components/OrderForm";
import { LockBanner } from "@/components/LockBanner";

export default async function OrderDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  await requireCurrentUser();
  const { id } = await params;
  const order = await getOrderById(id);

  if (!order) {
    notFound();
  }

  const isClosed = order.status === "closed";

  // Bind orderId to the update action
  const updateOrderWithId = updateOrder.bind(null, order.id);

  return (
    <div className="min-h-screen bg-bg">
      <Navbar />

      <main className="max-w-[1080px] mx-auto px-6 py-8">
        {isClosed && (
          <div className="mb-6">
            <LockBanner />
          </div>
        )}

        <div className="mb-8">
          <h1 className="font-display text-3xl font-bold text-fg">{order.title}</h1>
          <p className="text-muted text-sm mt-1">
            {isClosed ? "This order is read-only" : "Edit order details below"}
          </p>
        </div>

        <OrderForm
          mode="edit"
          initialData={order}
          serverAction={updateOrderWithId}
          disabled={isClosed}
        />
      </main>
    </div>
  );
}