---
export const prerender = false;

import AdminLayout from '../../../layouts/AdminLayout.astro';
import OrdersTable from '../../../components/admin/OrdersTable.astro';
import { listOrders, type OrderStatus } from '@platform-modules/commerce-orders';
import { ADMIN_ACTOR, badgeClassesForTone, loadAdminDb, tabBadgeTone } from '../../../lib/admin.js';

type TabKey = 'all' | 'pending' | 'processing' | 'fulfilled';

const tabParam = Astro.url.searchParams.get('tab');
const activeTab: TabKey =
  tabParam === 'pending' || tabParam === 'processing' || tabParam === 'fulfilled' ? tabParam : 'all';

const dbResult = loadAdminDb();
let error: string | null = null;
let allOrders: Awaited<ReturnType<typeof listOrders>>['items'] = [];
let pendingOrders: Awaited<ReturnType<typeof listOrders>>['items'] = [];
let processingOrders: Awaited<ReturnType<typeof listOrders>>['items'] = [];
let fulfilledOrders: Awaited<ReturnType<typeof listOrders>>['items'] = [];

async function loadByStatus(status?: OrderStatus) {
  if (!dbResult.ok) return [];
  const page = await listOrders(dbResult.db, ADMIN_ACTOR, {
    limit: 50,
    ...(status ? { status } : {}),
  });
  return page.items;
}

if (!dbResult.ok) {
  error = dbResult.error;
} else {
  try {
    [allOrders, pendingOrders, processingOrders, fulfilledOrders] = await Promise.all([
      loadByStatus(),
      loadByStatus('pending'),
      loadByStatus('paid'),
      loadByStatus('fulfilled'),
    ]);
  } catch (e) {
    error = e instanceof Error ? e.message : 'Failed to load orders.';
  }
}

const pendingCount = pendingOrders.length;
const pendingTone = tabBadgeTone(pendingCount, 5, 10);

const tabs: { key: TabKey; label: string }[] = [
  { key: 'all', label: 'All' },
  { key: 'pending', label: 'Pending' },
  { key: 'processing', label: 'Processing' },
  { key: 'fulfilled', label: 'Fulfilled' },
];
---

<AdminLayout title="Orders">
  <h1 class="mb-6 text-2xl font-semibold">Orders</h1>

  {error ? (
    <p class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-red-800" role="alert">{error}</p>
  ) : (
    <>
      <nav class="mb-6 flex flex-wrap gap-2 border-b border-[var(--mod-color-border)]" aria-label="Order filters">
        {tabs.map((tab) => (
          <a
            href={`/admin/orders?tab=${tab.key}`}
            class:list={[
              'inline-flex items-center gap-2 border-b-2 px-3 py-2 text-sm font-medium -mb-px',
              activeTab === tab.key
                ? 'border-[var(--mod-color-accent)] text-[var(--mod-color-accent)]'
                : 'border-transparent text-gray-600 hover:text-gray-900',
            ]}
          >
            {tab.label}
            {tab.key === 'pending' && pendingCount > 0 ? (
              <span class={badgeClassesForTone(pendingTone)}>{pendingCount}</span>
            ) : null}
          </a>
        ))}
      </nav>

      <section class:list={[{ hidden: activeTab !== 'all' }]}>
        <OrdersTable orders={allOrders} />
      </section>
      <section class:list={[{ hidden: activeTab !== 'pending' }]}>
        <OrdersTable orders={pendingOrders} emptyMessage="No pending orders." />
      </section>
      <section class:list={[{ hidden: activeTab !== 'processing' }]}>
        <OrdersTable orders={processingOrders} emptyMessage="No orders in processing (paid)." />
      </section>
      <section class:list={[{ hidden: activeTab !== 'fulfilled' }]}>
        <OrdersTable orders={fulfilledOrders} emptyMessage="No fulfilled orders." />
      </section>
    </>
  )}
</AdminLayout>