function Proveedores() {
  const toast = useToast();
  const [rows, setRows] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [editando, setEditando] = React.useState(null);
  const [eliminando, setEliminando] = React.useState(null);

  const cargar = React.useCallback(async () => {
    setLoading(true);
    try { setRows((await Api.get('/proveedores')).data); } catch (err) { toast.error(err.message); } finally { setLoading(false); }
  }, []);

  React.useEffect(() => { cargar(); }, [cargar]);

  const guardar = async (form) => {
    try {
      if (form.id) await Api.put(`/proveedores/${form.id}`, form);
      else await Api.post('/proveedores', form);
      toast.success('Proveedor guardado');
      setEditando(null);
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  const eliminar = async () => {
    try {
      await Api.del(`/proveedores/${eliminando.id}`);
      toast.success('Proveedor eliminado');
      setEliminando(null);
      cargar();
    } catch (err) { toast.error(err.message); }
  };

  return (
    <div>
      <div className="panel">
        <div className="panel__header">
          <div className="panel__title">Proveedores</div>
          <button className="btn btn-primary btn-sm" onClick={() => setEditando({})}><IconPlus size={14} /> Nuevo proveedor</button>
        </div>
        <p className="text-muted" style={{ marginTop: -8, marginBottom: 16 }}>
          Empresas o personas que ENTREGAN baterías en un Ingreso. Son distintas del empleado que las recibe.
        </p>
        {loading ? <p className="text-muted">Cargando…</p> : (
          <DataTable
            columns={[
              { key: 'nombre', header: 'Nombre' },
              { key: 'estado', header: 'Estado', render: (r) => <span className="tag-chip">{r.estado}</span> },
              { key: 'acciones', header: '', render: (r) => (
                <div style={{ display: 'flex', gap: 6 }}>
                  <button className="icon-btn" onClick={() => setEditando(r)}><IconEdit size={14} /></button>
                  <button className="icon-btn" onClick={() => setEliminando(r)}><IconTrash size={14} /></button>
                </div>
              ) },
            ]}
            rows={rows}
            emptyTitle="Sin proveedores registrados"
            emptyHint="Registra aquí los proveedores que luego podrás seleccionar desde Ingreso Masivo."
          />
        )}
      </div>

      {editando && <ProveedorModal proveedor={editando} onClose={() => setEditando(null)} onSave={guardar} />}

      <ConfirmDialog
        open={!!eliminando}
        title="Eliminar proveedor"
        message={`¿Eliminar "${eliminando?.nombre}"? Si tiene ingresos registrados, no podrá eliminarse.`}
        danger
        confirmLabel="Eliminar"
        onCancel={() => setEliminando(null)}
        onConfirm={eliminar}
      />
    </div>
  );
}

function ProveedorModal({ proveedor, onClose, onSave }) {
  const [form, setForm] = React.useState({ id: proveedor.id, nombre: proveedor.nombre || '', estado: proveedor.estado || 'ACTIVO' });
  return (
    <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card">
        <div className="modal-card__header">
          <div className="modal-card__title">{proveedor.id ? 'Editar proveedor' : 'Nuevo proveedor'}</div>
          <button className="icon-btn" onClick={onClose}><IconX size={16} /></button>
        </div>
        <div className="modal-card__body">
          <div className="field">
            <label>Nombre</label>
            <input value={form.nombre} onChange={(e) => setForm({ ...form, nombre: e.target.value })} autoFocus />
          </div>
          {proveedor.id && (
            <div className="field">
              <label>Estado</label>
              <select value={form.estado} onChange={(e) => setForm({ ...form, estado: e.target.value })}>
                <option value="ACTIVO">Activo</option>
                <option value="INACTIVO">Inactivo</option>
              </select>
            </div>
          )}
        </div>
        <div className="modal-card__footer">
          <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => onSave(form)} disabled={!form.nombre.trim()}>Guardar</button>
        </div>
      </div>
    </div>
  );
}