import { redirect } from "next/navigation";
import { format } from "date-fns";
import { Package } from "lucide-react";
import { getDashboardUser } from "@/lib/view-as";
import { listOrganizerMerchOrders } from "@db/queries/merch";
import { formatPrice } from "@/lib/format";
import { PageHeader, EmptyState, TableShell, LinkButton } from "@/components/ui";
import FulfillmentControl from "./fulfillment-control";

export const metadata = { title: "Merch orders · Dashboard" };

export default async function MerchOrdersPage() {
  const { user } = await getDashboardUser();
  if (!user) redirect("/login");

  const orders = await listOrganizerMerchOrders(user.id);

  return (
    <div className="space-y-6">
      <PageHeader
        icon={Package}
        title="Merch orders"
        description="Paid orders. Mark them ready, shipped or collected so buyers know where theirs is."
        actions={
          <LinkButton href="/dashboard/merch" variant="secondary">
            Back to shop
          </LinkButton>
        }
      />

      {orders.length === 0 ? (
        <EmptyState icon={Package} title="No orders yet" body="Paid merch orders will show up here." />
      ) : (
        <TableShell>
          <thead>
            <tr>
              <th>Code</th>
              <th>Buyer</th>
              <th>Items</th>
              <th>How</th>
              <th className="text-right">Total</th>
              <th>Date</th>
              <th>Fulfilment</th>
            </tr>
          </thead>
          <tbody>
            {orders.map((o) => (
              <tr key={o.id} className="align-top">
                <td className="font-mono font-medium text-be-text">{o.pickupCode}</td>
                <td className="text-be-text">
                  {o.buyerName}
                  <div className="text-xs text-be-muted">{o.buyerPhone}</div>
                  <div className="text-xs text-be-muted">{o.buyerEmail}</div>
                </td>
                <td className="text-be-text">
                  {o.items.map((i) => (
                    <div key={i.id}>
                      {i.quantity} × {i.productName} <span className="text-be-muted">({i.variantLabel})</span>
                    </div>
                  ))}
                </td>
                <td className="text-be-muted">
                  {o.fulfillment === "pickup" ? (
                    "Pickup"
                  ) : (
                    <>
                      Delivery
                      <div className="max-w-[14rem] text-xs">
                        {o.deliveryAddress}, {o.deliveryCity}
                      </div>
                    </>
                  )}
                </td>
                <td className="whitespace-nowrap text-right tabular-nums text-be-text">
                  {formatPrice(o.totalCents, o.currency)}
                </td>
                <td className="whitespace-nowrap text-be-muted">{format(new Date(o.createdAt), "PP")}</td>
                <td>
                  {o.status === "paid" ? (
                    <FulfillmentControl
                      orderId={o.id}
                      method={o.fulfillment}
                      status={o.fulfillmentStatus}
                      note={o.trackingNote ?? ""}
                    />
                  ) : (
                    <span className="text-be-muted">—</span>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </TableShell>
      )}
    </div>
  );
}