import type { Metadata } from "next";
import Link from "next/link";
import { requireCustomer } from "@/lib/auth";
import { db } from "@/lib/db";
import { customerLogout } from "../actions";
import { taka } from "@/lib/money";
import { fmtDate } from "@/lib/dates";
import { FULFILLMENT_LABEL, PAYMENT_LABEL } from "@/lib/orders";
import { isStaff } from "@/lib/permissions";

export const metadata: Metadata = { title: "Account", robots: { index: false } };

export default async function Account() {
  const user = await requireCustomer("/account");
  const orders = await db.order.findMany({ where: { userId: user.id }, orderBy: { createdAt: "desc" }, include: { items: { select: { productName: true, qty: true } } } });
  return (
    <div className="wrap py-12 md:py-20 max-w-[1000px]">
      <div className="flex justify-between items-end gap-4 flex-wrap">
        <div><h1 className="font-display text-[48px] md:text-[72px] leading-none">Account</h1><p className="text-stone mt-3">{user.name} · {user.email}</p></div>
        <div className="flex gap-5 items-center">{isStaff(user.role) && <Link href="/admin" className="link-line">Admin</Link>}<form action={customerLogout}><button className="link-line">Sign out</button></form></div>
      </div>
      <h2 className="font-display text-[32px] mt-14 mb-4">Orders</h2>
      {orders.length === 0 ? <p className="text-stone">No orders yet. <Link href="/shop" className="underline underline-offset-4 text-ink">Shop all</Link></p> : (
        <ul className="divide-y divide-sand border-y border-sand">
          {orders.map((o) => (
            <li key={o.id}><Link href={`/order/${o.number}?t=${o.trackingToken}`} className="py-5 grid md:grid-cols-[150px_1fr_auto] gap-2 md:gap-6 hover:bg-linen/50 px-2 -mx-2">
              <span>{o.number}<br /><span className="text-stone text-[13px]">{fmtDate(o.createdAt)}</span></span>
              <span className="text-[14px]">{o.items.map((i) => `${i.productName} × ${i.qty}`).join(", ")}<br /><span className="text-stone">{FULFILLMENT_LABEL[o.fulfillmentStatus]} · {PAYMENT_LABEL[o.paymentStatus]}</span></span>
              <span className="md:text-right">{taka(o.total)}{o.total - o.amountPaid > 0 && o.fulfillmentStatus !== "CANCELLED" ? <><br /><span className="text-gilt text-[13px]">{taka(o.total - o.amountPaid)} outstanding</span></> : null}</span>
            </Link></li>))}
        </ul>)}
    </div>
  );
}