import { prisma } from '@/lib/prisma';
import ToggleVerifyButton from '@/components/ToggleVerifyButton';
import FeaturedModal from '@/components/FeaturedModal';

async function getBusinesses() {
  return await prisma.business.findMany({
    include: {
      owner: true,
    },
    orderBy: {
      createdAt: 'desc',
    },
  });
}

export default async function EntrepreneursPage() {
  const businesses = await getBusinesses();

  return (
    <div>
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-white mb-2">Gestion des Entrepreneurs</h1>
        <p className="text-slate-400">Valider ou révoquer les comptes des entreprises.</p>
      </div>

      <div className="card overflow-hidden p-0">
        <table className="data-table">
          <thead>
            <tr>
              <th>Entreprise</th>
              <th>Catégorie</th>
              <th>Propriétaire</th>
              <th>Statut</th>
              <th className="text-center">Vues</th>
              <th className="text-center">Mise en avant</th>
              <th className="text-right">Action</th>
            </tr>
          </thead>
          <tbody>
            {businesses.length === 0 ? (
              <tr>
                <td colSpan={5} className="text-center py-10 text-slate-500">
                  Aucun entrepreneur trouvé.
                </td>
              </tr>
            ) : (
              businesses.map((business) => (
                <tr key={business.id}>
                  <td>
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center overflow-hidden">
                        {business.logoUrl ? (
                          <img src={business.logoUrl} alt={business.name} className="w-full h-full object-cover" />
                        ) : (
                          <span className="text-xs text-slate-500">LOGO</span>
                        )}
                      </div>
                      <div>
                        <div className="font-semibold text-white">{business.name}</div>
                        <div className="text-xs text-slate-500">{business.location}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <span className="text-sm text-slate-300">{business.category}</span>
                  </td>
                  <td>
                    <div className="text-sm text-white">{business.owner.name}</div>
                    <div className="text-xs text-slate-500">{business.owner.email}</div>
                  </td>
                  <td>
                    {business.verified ? (
                      <span className="badge badge-verified">Vérifié</span>
                    ) : (
                      <span className="badge badge-pending">En attente</span>
                    )}
                  </td>
                  <td className="text-center font-medium text-slate-300">
                    {business.viewCount.toLocaleString()}
                  </td>
                  <td className="text-center">
                    <FeaturedModal business={business} />
                  </td>
                  <td className="text-right">
                    <ToggleVerifyButton id={business.id} verified={business.verified} />
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}
