'use client';

import { useEffect, useState } from 'react';

type Business = {
  id: number;
  name: string;
  email?: string;
  businessName?: string;
  roles?: string[];
};

export default function BusinessesList() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [businesses, setBusinesses] = useState<Business[]>([]);

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

    load();
  }, []);

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

  if (!businesses || businesses.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 negocios registrados</p>
          <p className="mt-2 text-sm text-slate-500">Cuando se aprueben solicitudes aparecerán aquí los comercios asociados.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="grid gap-4 md:grid-cols-2">
      {businesses.map((b) => (
        <div key={b.id} className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
          <h3 className="font-semibold text-slate-900">{b.businessName || b.name}</h3>
          <p className="text-sm text-slate-600">Email: {b.email || 'No registrado'}</p>
          <div className="mt-3 flex gap-2">
            <a className="inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm text-white" href={`/gestor/negocios/${b.id}`}>Ver</a>
            <a className="inline-flex items-center rounded-md border border-slate-300 px-3 py-2 text-sm text-slate-700" href={`/dashboard/perfil?user=${b.id}`}>Ir al perfil</a>
          </div>
        </div>
      ))}
    </div>
  );
}