import Link from 'next/link';
import { redirect } from 'next/navigation';
import type { Metadata } from 'next';
import { getAccountToken } from '@/lib/account-session';
import { backendApi, BackendApiError, type ApiOrder } from '@/lib/backend-api';
import { ROUTES, orderRoute } from '@/lib/routes';
import { getSiteSettings, formatPrice } from '@/lib/site-settings';

export const metadata: Metadata = { title: 'Order History' };

export default async function OrderHistoryPage() {
  const token = getAccountToken();
  if (!token) {
    redirect(`${ROUTES.login}?redirect=${ROUTES.orders}`);
    return;
  }

  const settings = await getSiteSettings();

  let orders: ApiOrder[] = [];
  try {
    const res = await backendApi.getMyOrders(token);
    orders = res.data;
  } catch (err) {
    if (err instanceof BackendApiError && err.status === 401) {
      redirect(`${ROUTES.login}?redirect=${ROUTES.orders}`);
    }
    // Any other failure (network hiccup, etc.) — fail soft with an empty
    // list rather than crashing the whole account section.
  }

  return (
    <div className="space-y-5">
      <h1 className="font-serif text-2xl font-bold text-navy-800">Order History</h1>

      {orders.length === 0 ? (
        <p className="text-sm text-navy-600">
          You haven&apos;t placed any orders yet.{' '}
          <Link href={ROUTES.shop} className="font-semibold text-gold-600 hover:text-gold-700">Browse the shop</Link>.
        </p>
      ) : (
        <div className="space-y-3">
          {orders.map((order) => (
            <Link
              key={order.order_id}
              href={orderRoute(order.order_id)}
              className="card flex items-center justify-between p-4 hover:border-gold-300"
            >
              <div>
                <p className="text-sm font-semibold text-navy-800">Order #{order.order_id}</p>
                <p className="mt-0.5 text-xs capitalize text-navy-500">
                  {order.order_status} · Payment {order.payment_status}
                </p>
              </div>
              <span className="text-sm font-semibold text-navy-800">
                {formatPrice(order.net_amount, settings.currency)}
              </span>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}