import { getTranslations, setRequestLocale } from "next-intl/server";
import { Link } from "@/i18n/navigation";
import { updateOrderStatusAction } from "@/app/shop-actions";
import { getShopByOwner, listOrders } from "@/lib/shop";
import { requireUser } from "@/lib/session";

export default async function ShopOrdersPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const session = await requireUser();
  const t = await getTranslations("shop");
  const shop = await getShopByOwner(session.user.id);
  const orders = await listOrders(session.user.id);

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <h1 className="page-title">{t("orders")}</h1>
        <Link href="/dashboard/shop" className="text-sm text-brand">
          {t("back")}
        </Link>
      </div>
      {!shop ? <p className="text-muted">{t("needShop")}</p> : null}
      {orders.length === 0 ? <p className="text-muted">{t("noOrders")}</p> : null}
      <div className="space-y-4">
        {orders.map((order) => (
          <article key={order.id} className="card space-y-2 p-5 text-sm">
            <div className="flex flex-wrap items-center justify-between gap-2">
              <h2 className="text-lg font-semibold">{order.productTitle}</h2>
              <span className="rounded-full bg-brand/10 px-3 py-1 text-xs font-semibold text-brand">
                {t(`st_${order.status}`)}
              </span>
            </div>
            <p>
              {order.qty} × {order.size} · {order.totalPrice} {shop?.currency ?? ""}
            </p>
            <p>
              <strong>{t("buyer")}:</strong> {order.buyerName} · {order.phone}
            </p>
            <p>
              <strong>{t("address")}:</strong> {order.address}
            </p>
            {order.notes ? (
              <p>
                <strong>{t("notes")}:</strong> {order.notes}
              </p>
            ) : null}
            <p>
              <strong>{t("pay")}:</strong> {t(`pay_${order.paymentMethod}`)}
            </p>
            <p className="text-xs text-muted">{order.createdAt}</p>
            <form action={updateOrderStatusAction} className="flex flex-wrap gap-2">
              <input type="hidden" name="orderId" value={order.id} />
              {["CONFIRMED", "SHIPPED", "DONE", "CANCELLED"].map((status) => (
                <button key={status} name="status" value={status} className="btn-ghost px-3 py-1 text-xs">
                  {t(`st_${status}`)}
                </button>
              ))}
            </form>
          </article>
        ))}
      </div>
    </div>
  );
}