"use client";

import { Suspense } from "react";
import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useAdminOrders } from "@/lib/queries/use-admin";
import type { AdminOrdersQueryInput } from "@alqove/api-client";

const ORDER_STATUSES = ["all", "pending", "shipped", "delivered", "cancelled"] as const;
type OrderStatusChip = (typeof ORDER_STATUSES)[number];

const STATUS_COLORS: Record<string, string> = {
  pending: "bg-amber-100 text-amber-800",
  processing: "bg-amber-100 text-amber-800",
  shipped: "bg-forest-100 text-forest-800",
  delivered: "bg-forest-100 text-forest-800",
  disputed: "bg-red-100 text-red-800",
  cancelled: "bg-slate-200 text-slate-700",
  refunded: "bg-slate-200 text-slate-700",
};

const STATUS_LABEL: Record<string, string> = {
  pending: "Pending",
  processing: "Processing",
  shipped: "Shipped",
  delivered: "Delivered",
  disputed: "Disputed",
  cancelled: "Cancelled",
  refunded: "Refunded",
};

function formatPrice(cents: number): string {
  return `$${(cents / 100).toFixed(2)}`;
}

export default function AdminOrdersPage() {
  return (
    <Suspense fallback={null}>
      <AdminOrders />
    </Suspense>
  );
}

function AdminOrders() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const raw = searchParams.get("status");
  const status: AdminOrdersQueryInput["status"] =
    raw && (ORDER_STATUSES as readonly string[]).includes(raw)
      ? (raw as OrderStatusChip)
      : "all";
  const setStatus = (next: OrderStatusChip) => {
    const params = new URLSearchParams(searchParams.toString());
    if (next === "all") params.delete("status");
    else params.set("status", next);
    const qs = params.toString();
    router.replace(qs ? `${pathname}?${qs}` : pathname);
  };
  const { data, isLoading, isError } = useAdminOrders({
    status,
    sort: "created_desc",
  });
  const orders = data?.data ?? [];
  const meta = data?.meta;

  return (
    <div>
      <h1 className="text-2xl font-bold text-slate-900">Orders</h1>
      <p className="mt-1 text-sm text-slate-500">All marketplace orders and disputes.</p>

      <div className="mt-4 flex gap-2">
        {(["all", "pending", "shipped", "delivered", "cancelled"] as const).map((s) => (
          <button
            key={s}
            onClick={() => setStatus(s)}
            className={`rounded-md px-3 py-1 text-xs font-medium ${
              status === s
                ? "bg-slate-900 text-white"
                : "border border-slate-300 text-slate-600 hover:bg-slate-50"
            }`}
          >
            {s === "all" ? "All" : STATUS_LABEL[s]}
          </button>
        ))}
      </div>

      {isError && (
        <p className="mt-4 rounded bg-red-50 p-3 text-sm text-red-700">
          Couldn&apos;t load orders. You may need admin access.
        </p>
      )}

      <div className="mt-4 bg-white rounded border border-slate-200">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-slate-200">
              <th className="text-left px-4 py-3 font-medium text-slate-500">Order</th>
              <th className="text-left px-4 py-3 font-medium text-slate-500">Buyer</th>
              <th className="text-left px-4 py-3 font-medium text-slate-500">Store</th>
              <th className="text-left px-4 py-3 font-medium text-slate-500">Total</th>
              <th className="text-left px-4 py-3 font-medium text-slate-500">Status</th>
            </tr>
          </thead>
          <tbody>
            {isLoading && (
              <tr>
                <td colSpan={5} className="px-4 py-6 text-center text-sm text-slate-400">
                  Loading…
                </td>
              </tr>
            )}
            {!isLoading && orders.length === 0 && (
              <tr>
                <td colSpan={5} className="px-4 py-6 text-center text-sm text-slate-400">
                  No orders match.
                </td>
              </tr>
            )}
            {orders.map((order) => {
              const buyer = [order.buyer.first_name, order.buyer.last_name]
                .filter(Boolean)
                .join(" ") || "—";
              return (
                <tr key={order.id} className="border-b border-slate-100 last:border-0">
                  <td className="px-4 py-3 font-mono text-xs text-slate-700">
                    <Link
                      href={`/admin/orders/${order.id}`}
                      className="text-forest-700 hover:underline"
                    >
                      {order.id.slice(0, 8)}
                    </Link>
                  </td>
                  <td className="px-4 py-3 text-slate-500">{buyer}</td>
                  <td className="px-4 py-3 text-slate-500">{order.store.name}</td>
                  <td className="px-4 py-3 text-slate-900">{formatPrice(order.total)}</td>
                  <td className="px-4 py-3">
                    <span
                      className={`inline-block text-xs font-medium px-2 py-0.5 rounded ${
                        STATUS_COLORS[order.status] ?? "bg-slate-100 text-slate-600"
                      }`}
                    >
                      {STATUS_LABEL[order.status] ?? order.status}
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {meta && (
        <p className="mt-3 text-xs text-slate-400">
          {meta.total} {meta.total === 1 ? "order" : "orders"}
        </p>
      )}
    </div>
  );
}