'use client';

import { useEffect, useState } from 'react';

type Coupon = {
  id: number;
  title: string;
  category?: string;
  status?: string;
  price?: string | number;
  ownerUserId?: number | string;
};

export default function ProductsList() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [coupons, setCoupons] = useState<Coupon[]>([]);

  useEffect(() => {
    async function load() {
      try {
        setLoading(true);
        const res = await fetch('/api/gestor/products');
        const data = await res.json();
        if (!res.ok || !data.success) throw new Error(data.error || 'Error cargando productos');
        setCoupons(data.coupons || []);
      } catch (err: any) {
        setError(err?.message || 'Error desconocido');
      } finally {
        setLoading(false);
      }
    }

    load();
  }, []);

  if (loading) return <div className="p-6">Cargando productos…</div>;
  if (error) return <div className="p-6 text-rose-600">{error}</div>;

  if (!coupons || coupons.length === 0) {
    return (
      <div className="p-6">
        <div className="rounded-xl border border-dashed border-slate-200 bg-white p-6 text-center">
          <p className="text-lg font-medium text-slate-900">No hay productos o cupones</p>
          <p className="mt-2 text-sm text-slate-500">Los comercios aún no han creado ofertas. Aparecerán aquí cuando existan promociones activas.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      {coupons.map((c) => (
        <div key={c.id} className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
          <h3 className="font-semibold text-slate-900">{c.title}</h3>
          <p className="text-sm text-slate-600">Categoría: {c.category || 'Sin categoría'}</p>
          <p className="text-sm text-slate-600">Estado: {c.status || '—'}</p>
          <p className="text-sm text-slate-600">Precio: {c.price ?? '—'}</p>
        </div>
      ))}
    </div>
  );
}