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

export default function RequirementsPage() {
  const [reqs, setReqs]       = useState([]);
  const [loading, setLoading] = useState(true);

  const load = () => {
    setLoading(true);
    api.get('/admin/requirements').then(r => setReqs(r.data.data)).catch(console.error).finally(() => setLoading(false));
  };

  useEffect(() => { load(); }, []);

  const remove = async (id) => {
    if (!confirm('¿Eliminar este requerimiento?')) return;
    await api.delete(`/admin/requirements/${id}`);
    load();
  };

  const statusColors = { open: 'bg-emerald-100 text-emerald-700', in_progress: 'bg-blue-100 text-blue-700', closed: 'bg-gray-100 text-gray-600', cancelled: 'bg-red-100 text-red-700' };

  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-[700px]">
          <thead className="bg-gray-50 border-b border-gray-100">
            <tr>
              {['ID','Título','Comprador','Categoría','Tipo','Estado','Fecha',''].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={8} className="text-center py-12 text-gray-400">Cargando…</td></tr>
            ) : reqs.length === 0 ? (
              <tr><td colSpan={8} className="text-center py-12 text-gray-400">Sin requerimientos</td></tr>
            ) : reqs.map(r => (
              <tr key={r.id} className="hover:bg-blue-50/30 transition-colors">
                <td className="px-4 py-3 text-gray-400 text-xs">{r.id}</td>
                <td className="px-4 py-3 font-semibold text-gray-800 max-w-[180px] truncate">{r.title}</td>
                <td className="px-4 py-3 text-xs text-gray-500">{r.buyer_name}</td>
                <td className="px-4 py-3 text-xs text-gray-500">{r.category_name || '—'}</td>
                <td className="px-4 py-3"><span className="inline-flex text-xs font-semibold px-2.5 py-1 rounded-full bg-gray-100 text-gray-600">{r.type}</span></td>
                <td className="px-4 py-3">
                  <span className={`inline-flex text-xs font-semibold px-2.5 py-1 rounded-full ${statusColors[r.status] || 'bg-gray-100 text-gray-600'}`}>{r.status}</span>
                </td>
                <td className="px-4 py-3 text-xs text-gray-400 whitespace-nowrap">{new Date(r.created_at).toLocaleDateString('es-MX')}</td>
                <td className="px-4 py-3">
                  <button onClick={() => remove(r.id)} className="text-xs text-red-500 hover:text-red-700 font-semibold px-3 py-1.5 rounded-lg hover:bg-red-50 transition-colors">Eliminar</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
