import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { getCurrentSession } from "@/lib/auth/current-user";
import { getMyOrderById } from "@/lib/actions/orders";

export const dynamic = "force-dynamic";

const STATUSES = ["pending", "processing", "shipped", "delivered"];

export default async function OrderDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  if (!(await getCurrentSession())) redirect("/login");
  const { id } = await params;
  const order = await getMyOrderById(id);
  if (!order) notFound();
  const current =
    order.status === "cancelled" ? -1 : STATUSES.indexOf(order.status);

  return (
    <main className="mx-auto max-w-container-max px-gutter py-8 md:py-12">
      <Link href="/orders" className="text-sm font-semibold text-primary">
        ← Back to orders
      </Link>
      <div className="mt-5 flex flex-wrap items-end justify-between gap-3">
        <div>
          <p className="text-sm text-muted-foreground">
            Order placed {new Date(order.date).toLocaleString("en-GB")}
          </p>
          <h1 className="text-3xl font-bold">#{order.orderNumber}</h1>
        </div>
        <span className="rounded-full bg-primary/10 px-3 py-1 text-sm font-semibold text-primary">
          {order.status}
        </span>
      </div>
      <section className="mt-8 rounded-lg border border-outline-variant p-5">
        <h2 className="font-semibold">Order status</h2>
        <div className="mt-5 grid gap-4 sm:grid-cols-4">
          {STATUSES.map((status, index) => (
            <div key={status} className="flex items-center gap-3 sm:block">
              <div
                className={`h-3 w-3 rounded-full ${current >= index ? "bg-primary" : "bg-muted"}`}
              />
              <p
                className={`mt-0 text-sm capitalize sm:mt-2 ${current >= index ? "font-semibold" : "text-muted-foreground"}`}
              >
                {status}
              </p>
            </div>
          ))}
        </div>
        {order.status === "cancelled" && (
          <p className="mt-4 text-sm font-semibold text-destructive">
            This order was cancelled.
          </p>
        )}
      </section>
      <div className="mt-6 grid gap-6 lg:grid-cols-[1fr_20rem]">
        <section className="rounded-lg border border-outline-variant p-5">
          <h2 className="font-semibold">Products</h2>
          <div className="mt-4 divide-y divide-outline-variant">
            {order.items.map((item) => (
              <div key={item.id} className="flex justify-between gap-4 py-4">
                <div>
                  <p className="font-medium">{item.name}</p>
                  <p className="text-sm text-muted-foreground">
                    Qty {item.quantity} · ৳{item.unitPrice.toLocaleString()}
                  </p>
                </div>
                <p className="font-semibold">
                  ৳{(item.unitPrice * item.quantity).toLocaleString()}
                </p>
              </div>
            ))}
          </div>
        </section>
        <aside className="space-y-6">
          <section className="rounded-lg border border-outline-variant p-5">
            <h2 className="font-semibold">Summary</h2>
            <dl className="mt-4 space-y-2 text-sm">
              <div className="flex justify-between">
                <dt>Subtotal</dt>
                <dd>৳{order.subtotal.toLocaleString()}</dd>
              </div>
              <div className="flex justify-between">
                <dt>Shipping</dt>
                <dd>৳{order.shippingCost.toLocaleString()}</dd>
              </div>
              <div className="flex justify-between border-t pt-2 font-bold">
                <dt>Total</dt>
                <dd>৳{order.grandTotal.toLocaleString()}</dd>
              </div>
            </dl>
            <p className="mt-4 text-sm text-muted-foreground">
              Payment: {order.payment.method}
            </p>
          </section>
          <section className="rounded-lg border border-outline-variant p-5">
            <h2 className="font-semibold">Shipping</h2>
            <p className="mt-3 text-sm text-muted-foreground">
              {order.shippingAddress.street}, {order.shippingAddress.city},{" "}
              {order.shippingAddress.district}
            </p>
            {order.shipment?.trackingNumber && (
              <p className="mt-3 text-sm">
                Tracking: <strong>{order.shipment.trackingNumber}</strong>
              </p>
            )}
          </section>
        </aside>
      </div>
    </main>
  );
}