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

export default function LogsPage() {
  const [logs, setLogs]       = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api.get('/admin/logs').then(r => setLogs(r.data.data)).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','Admin','Acción','Entidad','ID Entidad','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={6} className="text-center py-12 text-gray-400">Cargando…</td></tr>
            ) : logs.length === 0 ? (
              <tr><td colSpan={6} className="text-center py-12 text-gray-400">Sin logs</td></tr>
            ) : logs.map(l => (
              <tr key={l.id} className="hover:bg-blue-50/30 transition-colors">
                <td className="px-4 py-3 text-gray-400 text-xs">{l.id}</td>
                <td className="px-4 py-3 font-semibold text-gray-800">{l.admin_name}</td>
                <td className="px-4 py-3"><span className="inline-flex text-xs font-semibold px-2.5 py-1 rounded-full bg-blue-100 text-blue-700">{l.action}</span></td>
                <td className="px-4 py-3 text-xs text-gray-500">{l.entity_type || '—'}</td>
                <td className="px-4 py-3 text-xs text-gray-500">{l.entity_id || '—'}</td>
                <td className="px-4 py-3 text-xs text-gray-400 whitespace-nowrap">{new Date(l.created_at).toLocaleString('es-MX')}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
