---
export const prerender = false;

import AdminLayout from '../../../layouts/AdminLayout.astro';
import { listProducts } from '@platform-modules/commerce-catalog';
import { getAvailability, isInventoryItemNotFoundError } from '@platform-modules/commerce-inventory';
import { badgeClassesForTone, loadAdminDb, tabBadgeTone } from '../../../lib/admin.js';

type InventoryRow = {
  productId: string;
  productTitle: string;
  sku: string;
  variantId: string;
  available: number | null;
  displayQty: string;
  lowStock: boolean;
};

const dbResult = loadAdminDb();
let error: string | null = null;
const rows: InventoryRow[] = [];
let lowStockCount = 0;

if (!dbResult.ok) {
  error = dbResult.error;
} else {
  try {
    const { db } = dbResult;
    const { items: products } = await listProducts(db, { audience: 'admin' });

    for (const product of products) {
      for (const variant of product.variants) {
        let available: number | null = null;
        let displayQty = 'Not tracked';

        try {
          available = await getAvailability(db, variant.id);
          if (available === null) {
            displayQty = 'Unlimited';
          } else {
            displayQty = String(available);
            if (available < 5) {
              lowStockCount += 1;
            }
          }
        } catch (e) {
          if (!isInventoryItemNotFoundError(e)) {
            displayQty = 'Error';
          }
        }

        rows.push({
          productId: product.id,
          productTitle: product.title,
          sku: variant.sku || variant.id.slice(0, 8),
          variantId: variant.id,
          available,
          displayQty,
          lowStock: available !== null && available < 5,
        });
      }
    }
  } catch (e) {
    error = e instanceof Error ? e.message : 'Failed to load inventory.';
  }
}

const lowStockTone = tabBadgeTone(lowStockCount, 1, 5);
---

<AdminLayout title="Inventory">
  <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
    <h1 class="text-2xl font-semibold">Inventory</h1>
    {lowStockCount > 0 ? (
      <span class={badgeClassesForTone(lowStockTone)}>
        {lowStockCount} low stock
      </span>
    ) : null}
  </div>

  {error ? (
    <p class="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-red-800" role="alert">{error}</p>
  ) : rows.length === 0 ? (
    <p class="text-gray-600">No variants found.</p>
  ) : (
    <div class="overflow-x-auto">
      <table class="min-w-full border-collapse text-sm">
        <thead>
          <tr class="border-b border-[var(--mod-color-border)] text-left">
            <th class="px-3 py-2 font-medium">Product</th>
            <th class="px-3 py-2 font-medium">SKU</th>
            <th class="px-3 py-2 font-medium">Available qty</th>
            <th class="px-3 py-2 font-medium"></th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr class="border-b border-[var(--mod-color-border)]">
              <td class="px-3 py-2">{row.productTitle}</td>
              <td class="px-3 py-2 font-mono text-xs">{row.sku}</td>
              <td class="px-3 py-2">
                <span class="inline-flex items-center gap-2">
                  {row.displayQty}
                  {row.lowStock ? (
                    <span class={badgeClassesForTone('warning')}>Low</span>
                  ) : null}
                </span>
              </td>
              <td class="px-3 py-2">
                <a href={`/admin/products/${row.productId}`} class="text-[var(--mod-color-accent)] hover:underline">
                  Edit product
                </a>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )}
</AdminLayout>