'use client';
import { useEffect, useState } from 'react';
import api from '@/lib/api';

export default function SubscriptionsPage() {
  const [subs, setSubs]       = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.get('/admin/users', { params: { limit: 100 } })
      .then(r => setSubs(r.data.data.filter(u => u.is_seller)))
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  return (
    <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full text-sm min-w-[600px]">
          <thead className="bg-gray-50 border-b border-gray-100">
            <tr>
              {['ID','Vendedor','Email','Ciudad','Estado','Registro'].map(h => (
                <th key={h} className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">{h}</th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-50">
            {loading ? (
              <tr><td colSpan={6} className="text-center py-12 text-gray-400">Cargando…</td></tr>
            ) : subs.length === 0 ? (
              <tr><td colSpan={6} className="text-center py-12 text-gray-400">Sin vendedores</td></tr>
            ) : subs.map(u => (
              <tr key={u.id} className="hover:bg-blue-50/30 transition-colors">
                <td className="px-4 py-3 text-gray-400 text-xs">{u.id}</td>
                <td className="px-4 py-3 font-semibold text-gray-800">{u.name}</td>
                <td className="px-4 py-3 text-xs text-gray-500">{u.email}</td>
                <td className="px-4 py-3 text-xs text-gray-500">{u.city || '—'}</td>
                <td className="px-4 py-3">
                  <span className={`inline-flex text-xs font-semibold px-2.5 py-1 rounded-full ${u.status === 'active' ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'}`}>{u.status}</span>
                </td>
                <td className="px-4 py-3 text-xs text-gray-400 whitespace-nowrap">{new Date(u.created_at).toLocaleDateString('es-MX')}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
