import { GlassCard } from "@/components/shared/glass-card";
import { OrderStatusBadge } from "@/components/orders/order-status-badge";
import { orderItemSummary } from "@/lib/orders/presentation";
import type { Order } from "@/types";

type Props = {
  orders: Order[];
  highlightOrderId?: string;
};

export function OrderHistoryPanel({ orders, highlightOrderId }: Props) {
  if (orders.length === 0) {
    return (
      <GlassCard className="p-8 sm:p-10">
        <p className="text-muted-foreground text-xs font-semibold uppercase tracking-wider">
          No orders yet
        </p>
        <p className="font-display mt-2 text-lg font-semibold tracking-tight">
          Your receipts will appear here
        </p>
        <p className="text-muted-foreground mt-2 max-w-md text-sm leading-relaxed">
          Use the same email at checkout as your account. After your first purchase, you will see
          payment references and unlock status here.
        </p>
      </GlassCard>
    );
  }

  return (
    <section className="space-y-4">
      <p className="text-muted-foreground text-sm">
        Payment history and plan access linked to your account.
      </p>
      <div className="space-y-4">
        {orders.map((order) => {
          const highlighted = order.id === highlightOrderId;
          return (
            <GlassCard
              key={order.id}
              className={
                highlighted
                  ? "border-primary/40 p-6 ring-1 ring-primary/25"
                  : "p-6"
              }
            >
              <div className="flex flex-wrap items-start justify-between gap-3">
                <div>
                  <p className="text-muted-foreground text-[10px] font-semibold uppercase tracking-wider">
                    Order
                  </p>
                  <p className="font-mono text-sm text-foreground">{order.id}</p>
                </div>
                <OrderStatusBadge status={order.status} />
              </div>

              <p className="mt-4 text-sm font-semibold text-foreground">{orderItemSummary(order)}</p>

              <dl className="text-muted-foreground mt-4 grid gap-2 text-sm sm:grid-cols-2">
                <div>
                  <dt>Total</dt>
                  <dd className="mt-0.5 font-semibold text-foreground">₹{order.totalInr}</dd>
                </div>
                <div>
                  <dt>Date</dt>
                  <dd className="mt-0.5 text-foreground">
                    {new Date(order.createdAt).toLocaleString()}
                  </dd>
                </div>
                {order.razorpayPaymentId ? (
                  <div className="sm:col-span-2">
                    <dt>Payment reference</dt>
                    <dd className="font-mono mt-0.5 text-xs text-foreground">{order.razorpayPaymentId}</dd>
                  </div>
                ) : null}
              </dl>

              {highlighted && order.status === "paid" ? (
                <p className="border-primary/25 bg-primary/8 text-primary mt-4 rounded-lg border px-3 py-2 text-sm">
                  Payment confirmed — your plan is unlocked in My plans.
                </p>
              ) : null}
            </GlassCard>
          );
        })}
      </div>
    </section>
  );
}