import type { Metadata } from 'next';
import { fetchProducts } from '@/lib/api';

// This legacy admin route depends on the live catalog API.
export const dynamic = 'force-dynamic';

export const metadata: Metadata = {
  title: 'Admin Productos — mercadodevida',
};

export default async function AdminProductsPage() {
  const products = await fetchProducts();

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold text-gray-900">Productos</h1>
        <span className="text-sm text-gray-500">{products.length} productos</span>
      </div>

      <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
        <table className="w-full">
          <thead>
            <tr className="bg-gray-50 border-b border-gray-200">
              <th className="text-left text-xs font-semibold text-gray-500 uppercase tracking-wide px-4 py-3">Producto</th>
              <th className="text-left text-xs font-semibold text-gray-500 uppercase tracking-wide px-4 py-3">Marca</th>
              <th className="text-left text-xs font-semibold text-gray-500 uppercase tracking-wide px-4 py-3">Precio</th>
              <th className="text-left text-xs font-semibold text-gray-500 uppercase tracking-wide px-4 py-3">Stock</th>
              <th className="text-left text-xs font-semibold text-gray-500 uppercase tracking-wide px-4 py-3">Acciones</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {products.map((p) => (
              <tr key={p.id} className="hover:bg-gray-50 transition-colors">
                <td className="px-4 py-3">
                  <a href={`/products/${p.slug}`} className="text-sm font-medium text-gray-900 hover:text-[#70ad47] transition-colors">
                    {p.name}
                  </a>
                  <p className="text-xs text-gray-400 truncate max-w-xs">{p.description}</p>
                </td>
                <td className="px-4 py-3 text-sm text-gray-600">{p.brand?.name ?? '—'}</td>
                <td className="px-4 py-3">
                  <span className="text-sm font-bold text-[#70ad47]">—</span>
                </td>
                <td className="px-4 py-3">
                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                    Activo
                  </span>
                </td>
                <td className="px-4 py-3">
                  <a href={`/products/${p.slug}`} className="text-sm text-[#70ad47] hover:underline">
                    Ver
                  </a>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
