import Link from 'next/link';
import { redirect, notFound } 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 } from '@/lib/routes';

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

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

  let order: ApiOrder;
  try {
    const res = await backendApi.getMyOrder(token, params.id);
    order = res.data;
  } catch (err) {
    if (err instanceof BackendApiError && err.status === 401) {
      redirect(`${ROUTES.login}?redirect=${ROUTES.orders}`);
    }
    if (err instanceof BackendApiError && err.status === 404) {
      notFound();
    }
    throw err;
  }

  return (
    <section className="bg-beige py-14">
      <div className="container-page max-w-3xl">
        <Link href={ROUTES.orders} className="text-sm font-semibold text-gold-600 hover:text-gold-700">
          &larr; Order History
        </Link>
        <h1 className="mt-2 font-serif text-2xl font-bold text-navy-800">Order #{order.order_id}</h1>

        <div className="mt-6 grid gap-4 sm:grid-cols-2">
          <div className="card p-4">
            <p className="text-xs text-navy-500">Order Status</p>
            <p className="mt-1 font-semibold capitalize text-navy-800">{order.order_status}</p>
          </div>
          <div className="card p-4">
            <p className="text-xs text-navy-500">Payment</p>
            <p className="mt-1 font-semibold capitalize text-navy-800">
              {order.payment_method.replace(/_/g, ' ')} · {order.payment_status}
            </p>
          </div>
        </div>

        <div className="card mt-6 p-4">
          <p className="text-xs text-navy-500">Shipping Address</p>
          <p className="mt-1 text-sm text-navy-800">{order.shipping_address}</p>
        </div>

        <div className="card mt-6 divide-y divide-navy-100 p-4">
          {order.items.map((item) => (
            <div key={item.order_item_id} className="flex items-center justify-between py-3 text-sm">
              <div>
                <p className="font-medium text-navy-800">{item.product?.product_name ?? `Product #${item.product_id}`}</p>
                <p className="text-xs capitalize text-navy-500">Qty {item.quantity} · {item.shipping_status}</p>
              </div>
              <span className="font-semibold text-navy-800">Rs. {Number(item.subtotal).toLocaleString()}</span>
            </div>
          ))}
        </div>

        <div className="mt-6 flex justify-end gap-8 text-sm">
          <div className="text-right text-navy-500">
            <p>Shipping</p>
            <p>Total</p>
          </div>
          <div className="text-right">
            <p className="text-navy-800">Rs. {Number(order.shipping_cost).toLocaleString()}</p>
            <p className="font-bold text-navy-800">Rs. {Number(order.net_amount).toLocaleString()}</p>
          </div>
        </div>
      </div>
    </section>
  );
}