import Link from 'next/link';
import type { Metadata } from 'next';
import { getAccountToken } from '@/lib/account-session';
import { backendApi, BackendApiError, type ApiVendorOrderItem } from '@/lib/backend-api';
import { ROUTES } from '@/lib/routes';
import { OrderStatusSelect } from '@/components/vendor/order-status-select';
import { getSiteSettings, formatPrice } from '@/lib/site-settings';

export const metadata: Metadata = { title: 'My Orders' };

const TABS: { label: string; value?: string }[] = [
  { label: 'All' },
  { label: 'Pending', value: 'pending' },
  { label: 'Processing', value: 'processing' },
  { label: 'Shipped', value: 'shipped' },
  { label: 'Delivered', value: 'delivered' },
];

export default async function VendorOrdersPage({
  searchParams,
}: {
  searchParams?: { shipping_status?: string };
}) {
  const token = getAccountToken();
  const settings = await getSiteSettings();
  let items: ApiVendorOrderItem[] = [];
  let loadError: string | null = null;

  if (token) {
    try {
      const res = await backendApi.getVendorOrders(token, searchParams?.shipping_status);
      items = res.data;
    } catch (err) {
      loadError = err instanceof BackendApiError ? err.message : 'Could not load your orders right now.';
    }
  }

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

      <div className="flex flex-wrap gap-2">
        {TABS.map((tab) => (
          <Link
            key={tab.label}
            href={tab.value ? `${ROUTES.vendorOrders}?shipping_status=${tab.value}` : ROUTES.vendorOrders}
            className={`rounded-full border px-4 py-1.5 text-xs font-semibold ${
              searchParams?.shipping_status === tab.value
                ? 'border-navy-800 bg-navy-800 text-white'
                : 'border-navy-200 text-navy-600 hover:bg-white'
            }`}
          >
            {tab.label}
          </Link>
        ))}
      </div>

      {loadError && <p className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{loadError}</p>}

      {!loadError && items.length === 0 && <p className="card p-6 text-sm text-navy-600">No orders for your products yet.</p>}

      {items.length > 0 && (
        <div className="card divide-y divide-navy-100">
          {items.map((item) => (
            <div key={item.order_item_id} className="flex flex-wrap items-center gap-4 p-4">
              <div className="min-w-0 flex-1">
                <p className="text-sm font-semibold text-navy-800">
                  {item.product?.product_name ?? item.product?.name ?? `Product #${item.product_id}`}
                </p>
                <p className="text-xs text-navy-500">
                  Order #{item.order_id} · Qty {item.quantity} · {formatPrice(item.subtotal, settings.currency)}
                </p>
                {item.order?.shipping_address && (
                  <p className="mt-0.5 truncate text-xs text-navy-400">Ship to: {item.order.shipping_address}</p>
                )}
              </div>
              <OrderStatusSelect orderId={item.order_id} itemId={item.order_item_id} initialStatus={item.shipping_status} />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}