import Link from "next/link";
import { requireAdminPage } from "@/lib/require-admin-page";
import { AdminNav } from "@/components/admin/AdminNav";
import { ProductsTable } from "@/components/admin/ProductsTable";
import { getProducts } from "@/lib/db";

export default function AdminProductsPage() {
  requireAdminPage();
  const products = getProducts();

  return (
    <div>
      <AdminNav />
      <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6">
        <div className="flex items-center justify-between">
          <h1 className="font-display text-2xl font-bold text-brand-ink">Products</h1>
          <div className="flex gap-3">
            <Link
              href="/admin/products/import"
              className="rounded-lg border border-black/10 px-4 py-2.5 text-sm font-semibold text-brand-ink hover:bg-black/5"
            >
              Import CSV
            </Link>
            <Link
              href="/admin/products/new"
              className="rounded-lg bg-brand-orange px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-orange-dark"
            >
              + Add product
            </Link>
          </div>
        </div>
        <p className="mt-1 text-sm text-black/50">{products.length} products</p>

        <div className="mt-6">
          <ProductsTable products={products} />
        </div>
      </div>
    </div>
  );
}