export const dynamic = "force-dynamic";

/**
 * /dashboard — the customer's order history.
 *
 * This page used to render "No active eSIMs yet." unconditionally, which told
 * a paying customer their purchase had not happened. It now reads the orders
 * they have actually claimed and asks fulfilment about each one. Three
 * outcomes, all of them stated rather than implied: no orders, orders we could
 * read, and orders we could not read.
 */
import { auth } from "@clerk/nextjs/server";
import { redirect } from "next/navigation";
import { listClaimedOrderIds } from "@/lib/checkout-order-claim";
import { fetchOrder } from "@/vendor/carrier/client";
import type { EsimOrder, OrderStatus } from "@/vendor/carrier/types";
import { EsimControls } from "./EsimControls";

export const metadata = { title: "Dashboard" };

const STATUS_LABEL: Record<OrderStatus, string> = {
  pending: "Payment received",
  provisioning: "Setting up",
  ready: "Active",
  failed: "Needs attention",
};

function EmptyState() {
  return (
    <div className="rounded-2xl border border-sand-200 bg-white p-12 text-center dark:border-sand-800 dark:bg-sand-900">
      <p className="text-sand-500">No active eSIMs yet.</p>
      <a
        href="/shop"
        className="mt-4 inline-block rounded-full px-6 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
        style={{ background: "var(--brand-accent)" }}
      >
        Browse plans
      </a>
    </div>
  );
}

function OrderRow({ orderId, order }: { orderId: string; order: EsimOrder | null }) {
  return (
    <li className="rounded-2xl border border-sand-200 bg-white p-6 dark:border-sand-800 dark:bg-sand-900">
      <div className="flex flex-wrap items-baseline justify-between gap-2">
        <p className="font-medium text-sand-900 dark:text-sand-50">
          {order?.planName ?? order?.templateId ?? "eSIM order"}
        </p>
        <span className="text-xs text-sand-500">
          {order
            ? order.cancelledAt
              ? "Cancelled"
              : STATUS_LABEL[order.status]
            : "Status unavailable"}
        </span>
      </div>
      <p className="mt-1 font-mono text-xs break-all text-sand-400">{orderId}</p>
      {order?.iccid && <p className="mt-1 text-xs text-sand-500">ICCID {order.iccid}</p>}
      {!order && (
        <p className="mt-2 text-xs text-sand-500">
          We couldn&apos;t reach this order just now. Your purchase is safe — try again shortly.
        </p>
      )}
      <a
        href={`/activate/${encodeURIComponent(orderId)}`}
        className="mt-4 inline-block text-sm font-semibold text-[var(--brand-accent)] hover:underline"
      >
        {order?.status === "ready" ? "View QR code" : "View order"} →
      </a>
      {/* Only once there is an eSIM behind the row. Usage, top-up and cancel
          all address a thing that exists; offering them over a pending order
          invites three calls that can only answer "not yet". */}
      {order?.status === "ready" && (
        <EsimControls orderId={orderId} cancelled={Boolean(order.cancelledAt)} />
      )}
    </li>
  );
}

export default async function DashboardPage() {
  const { userId } = await auth();
  if (!userId) redirect("/sign-in?redirect_url=/dashboard");

  const orderIds = await listClaimedOrderIds(userId);
  const orders = await Promise.all(
    orderIds.map(async (orderId) => {
      const lookup = await fetchOrder(orderId);
      return { orderId, order: lookup.ok ? lookup.order : null };
    }),
  );
  const unreadable = orders.filter((entry) => entry.order === null).length;

  return (
    <div className="mx-auto max-w-4xl px-4 py-16">
      <h1 className="mb-8 text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
        Your eSIMs
      </h1>

      {orders.length === 0 ? (
        <EmptyState />
      ) : (
        <>
          {unreadable > 0 && (
            <p className="mb-6 rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-sand-700 dark:text-sand-200">
              We couldn&apos;t load {unreadable === orders.length ? "your orders" : "some of your orders"}{" "}
              right now. Nothing is lost — refresh in a minute, or contact us with the order number.
            </p>
          )}
          <ul className="space-y-4">
            {orders.map((entry) => (
              <OrderRow key={entry.orderId} orderId={entry.orderId} order={entry.order} />
            ))}
          </ul>
        </>
      )}
    </div>
  );
}